id选择器：#id
类选择器：.class
选择器叠加：.class1.class2 (选择同时含有这两个class的元素)
元素选择器：eg: div p （选择所有满足条件的后代）
父子选择器：div>p (选择满足条件的儿子)
兄弟选择器：div+p (选择紧邻div之后的p元素)
同级选所有：div ~ p (选择所有div之后的兄弟元素中有P的元素)
伪类选择器：:nth-child(n)该选择器选取父元素的第n 个子元素，不论元素的类型。
/* 选择第一个子元素 */.container > :first-child.container > .item:first-child/* 选择最后一个子元素 */.container > :last-child/* 选第3个: 索引是从1开始 */.container > :nth-child(3)/* 选择偶数行元素 */.container > :nth-child(even).container > :nth-child(2n)/* 选择奇数行元素 */.container > :nth-child(odd).container > :nth-child(2n-1)/* 从指定位置(从第4个开始)，选择剩下的所有元素 */.container > .item:nth-child(n + 4)/* 选择前三个元素 */.container .item:nth-child(-n + 3)/* 选择最后三个元素 */.container .item:nth-last-child(-n + 3)/* 选择倒数第二个元素 */.container .item:nth-last-child(2)
结构伪类选择器: :nth-of-type(n)选择器选取父元素的第 n 个指定类型的子元素,eg .class p:nth-of-type(1)
/*选择满足条件第一个元素*/:nth-of-type（1）/*选择满足条件最后一个元素*/:last-of-type/*选择满足条件前两个元素*/:nth-of-type(-n + 2)/*选择满足条件最后两个元素*/:nth-last-of-type(-n + 2)
伪类和伪元素：
常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。:link a:link 选择所有未被访问的链接:visited a:visited 选择所有已被访问的链接:active a:active 选择活动链接:hover a:hover 选择鼠标指针位于其上的链接:focus input:focus 选择获得焦点的 input 元素:first-letter p:first-letter 选择每个 <p> 元素的首字母:first-line p:first-line 选择每个 <p> 元素的首行:before p:before 在每个 <p> 元素的内容之前插入内容:after p:after 在每个 <p> 元素的内容之后插入内容:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）:target #news:target 选择当前活动的 #news 元素:enabled input:enabled 选择每个启用的 <input> 元素。:disabled input:disabled 选择每个禁用的 <input> 元素:checked input:checked 选择每个被选中的 <input> 元素:not(selector) :not(p) 选择非 <p> 元素的每个元素::selection ::selection 选择被用户选取的元素部分