本文主要介绍CSS选择器的种类、用途及其优化方案。API基本来源于MDN，有的当时忘记记录链接了，所以没有放链接。CSS组合器联合选择器（element.a）：匹配同时满足两个条件的元素。写法是p.a{}，一般以标签名开头，中间没有空格。示例：p.a{}匹配带有标签p和类a的元素。组选择器(.a,.b{})：匹配任何满足选择器的元素。写法是.a,.b{}，匹配a类和b类的元素。后代选择器（.testp）：被选元素是其他选择器的后代，不需要是直接子元素也可以匹配。写法是元素元素之间用空格隔开。示例：.testp匹配.test下的所有p标签。子选择器（.parent>.child）：只有直接子元素被选中时才匹配。层次结构中靠后的后代不匹配。写法是element>element。示例：.parent>.child是与.parent下的子元素类相匹配的元素。相邻兄弟选择器（p+img）：选择与层次结构中同一级别的另一个元素相邻的对象，即第一个选择器（例如p）之后的第一个元素（img）。写成.brother+#brother。示例：p+img匹配匹配层次结构中同一级别的p元素之后的第一个img元素。同级选择器（p~img）：选择层次结构中同级第一个元素之后的另一种类型的元素。它被写成#brother~.brother。示例p~img匹配层次结构中同一级别的p元素之后的所有img标签。伪元素1.定义伪元素：伪元素的作用就像是在标记中添加一个全新的HTML元素，而不是将类应用于现有元素。伪元素以双冒号开头。示例::伪元素名称。虽然一些早期的伪元素使用单冒号语法，但现代浏览器支持使用单冒号或双冒号语法的早期伪元素以实现向后兼容性。2.常用伪元素：::before：创建一个伪元素，它将成为被选元素的第一个子元素。它通常用于通过content属性为元素添加装饰。这个元素默认是一个内联元素。内容中不能使用标记实体，应使用Unicode转义字符。IE9支持，IE8需要使用:before。::before和::after生成的伪元素包含在元素格式化框中，因此不能应用于替换元素，例如或元素。::after：创建一个伪元素，它将成为所选元素的最后一个子元素。它通常用于通过content属性为元素添加装饰。这个元素默认是一个内联元素。IE9支持，IE8需要使用:before。::first-line：将样式应用于块级元素的第一行(display:block;)。IE9支持，需要在IE5.5上使用:first-line。::first-letter：选择块级元素第一行的第一个字母，文本所在行之前没有其他内容（如图片、行内表格）。IE9支持，IE5.5之间使用:firt-letter。::selection：应用于文档中用户突出显示的部分。IE9支持。伪类选择器1.定义伪类：伪类是一种选择器，用于选择处于特殊状态的元素。伪类是以冒号开头的关键字。示例：：伪类名。2、常用的伪类选择器:root：匹配文档树的根元素。对于HTML，:root代表元素，与html选择器相同，只是具有更高的优先级。IE9支持。:root{--main-color:hotpink;}.:empty：代表一个没有子元素的元素。子元素只能是元素节点或文本（包括空格）。注释和处理指令均无效。IE9支持。.box:空{}。:any-link:表示一个带有链接锚点的元素，不管它是否被访问过，即它会匹配每一个带有href属性的,或元素。因此，它将匹配所有:link或:visited。IE和Edge不支持。a:any-link{}:any-link{}:not()：匹配不满足选择器的元素，有时称为否定伪类。不能包含另一个否定选择器。IE9支持。.text:not(p){}/*匹配类为文本且元素类型不是p的元素*/。element:first-child：选择其父元素下第一个子元素且元素类型为element的元素。IE7支持，IE、Safari、Edge不支持匹配无父元素的元素。element:last-child：选择作为其父元素下的最后一个子元素且元素类型为element的元素。IE9支持，IE、Safari、Edge不支持匹配无父元素的元素。element:only-child：选择父元素下只有一个元素且元素类型为element的元素。IE9支持，IE、Safari、Edge不支持匹配无父元素的元素。element:nth-child(n)：选取属于其父元素下第n个子元素且元素类型为element的元素。从1开始排序，odd表示奇数位，even表示偶数位。IE9支持。（例子：

Title

Article