这一篇文章主要是介绍CSS选择器的种类和使用及其优化方案。API基本上都是来源于MDN,有的当时忘记记录链接了,所以就没放链接。
CSS组合器
并集选择器(element.a): 匹配同时满足两个条件的元素。写法为p.a {}写法一般是以标签名开头,中间没有空格。例: p.a{}匹配标签为p且class为a的元素。
组选择器(.a, .b {}): 匹配满足选择器的任意元素。写法为 .a, .b {},匹配class为a和class为b的元素。
后代选择器(.test p): 选择的元素是其他选择器的后代,不需要是直接的子元素就可以匹配。写法为 element element 中间以空格隔开。例: .test p为匹配 .test下的所有 p 标签。
子选择器(.parent > .child): 选择直接子元素时才匹配。层次结构后面的子孙不匹配。写法为element > element。例: .parent > .child为匹配 .parent下的子元素的class为child的元素。
相邻兄弟选择器(p + img): 选择层次结构中相同级别的另一个元素相邻的对象,是在第一个选择器(如 p)后面的第一个元素(img)。写法为 .brother + #brother。例:p + img为匹配层次结构中相同级别p元素后面的第一个img元素。
同级选择器(p ~ img): 选择层次结构中相同级别的、第一个元素后面的另一类元素。写法为#brother ~ .brother。例p ~ img为匹配层次结构中相同级别p元素后面的所有img标签。
伪元素
一、定义
伪元素: 伪元素的行为就像是在标记中添加了一个全新的HTML元素一样,而不是将类应用于现有元素。伪元素以双冒号开头。例 ::pseudo-element-nam 。在某些早期的伪元素使用单冒号语法,现代浏览器使用单冒号或双冒号语法支持早期的伪元素,以实现向后兼容。
二、常用的伪元素:
::before ：创建一个伪元素,其将成为匹配选中的元素的第一个子元素,常通过content属性来为一个元素添加修饰性,此元素默认为行内元素。在content中不能使用标记实体,应该使用Unicode转义字符。IE9支持,在IE8上需要使用 :before 才可以使用。由::before 和::after 生成的伪元素 包含在元素格式框内，因此不能应用在替换元素上，比如<img>或
元素。
::after ：创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,常通过content属性来为一个元素添加修饰性,此元素默认为行内元素。IE9支持,在IE8上需要使用 :before 才可以使用。
::first-line ：在某块级元素(display: block;)的第一行应用样式。IE9支持,在IE5.5上需要使用:first-line。
::first-letter ：选中某块级元素第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)。IE9支持,在IE5.5上之间使用:firt-letter 才行。
::selection ： 应用于文档中被用户高亮的部分。IE9支持。
伪类选择器
一、定义
伪类: 伪类是选择器,用于选择处于特殊状态的元素。伪类是以冒号开头的关键字。例: :伪类名 。
二、常用的伪类选择器
:root: 匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。IE9支持。:root {--main-color: hotpink;}。
:empty: 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。IE9支持。.box:empty {}。
:any-link: 代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。IE、Edge不支持。a:any-link {} :any-link {}
:not(): 匹配不符合选择器的元素，它有时也被称为反选伪类（negation pseudo-class）。不能包含另外一个否定选择器。IE9支持。.text:not(p) {} /* 匹配class为text且元素类型不为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支持。(例: <h1>标题</h1><p>文章</p> p:nth-child(1){color: red} 这个样式不会生效,因为它选择的是父元素下第二个元素且元素为 p 的标签)
element:nth-last-child(n) ：选择属于其父元素下的从后往前匹配的第n个子元素且元素类型为 element 的元素。IE9支持,,且IE、Safari、Edge不支持匹配没有父元素的元素。
element:nth-of-type(n)： 选择属于其父元素下类型为 element 的第n个元素。IE9支持。
element:nth-last-of-type(n) ： 选择属于其父元素下从后往前匹配 且 类型为 element 的第n个元素。IE9支持,且IE、Safari、Edge不支持匹配没有父元素的元素。
element:only-of-type ： 选择属于其父元素下只有一个元素且元素类型为 element 的元素。IE9支持。(例: <div><p>文本</p></div> p:only-of-type {color: red;})
:invalid ： 表示任意内容未通过验证的<input>或其他<form>元素。IE10支持。
:focus ： 表示获取焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘"tab"键选择它时才被触发。IE8支持。
:link ： 向未访问的链接添加特殊样式。IE3支持。
:visited ： 向已访问的链接添加特殊样式。IE3.5基础支持。
:hover ： 当鼠标指针悬停在元素上时提供关联的样式。IE7全部元素都支持。
:active ： 向(在鼠标点击与释放之间发生的事件)的元素添加特殊样式。非也可以用。 IE4支持标签,IE8支持所有标签。(链接伪类先后顺序应当遵循LVHA :link — :visited — :hover — :active)
:lang ： 基于元素语言来匹配页面元素。(:lange(en) {color: red;} div:lang(en) {color: red;}`<div lang="en"><div>`)IE8支持。
注:以上兼容性来自MDN。
CSS属性选择器
一、定义
属性选择器: 根据元素具有的属性来匹配元素。
二、用法
[attr](a[title]): 匹配属性名称为attr（方括号中的值）的元素。
[attr=value](a[href="https://example.com"]): 匹配属性名称为attr的元素，其值恰好是value —引号内的字符串。
[attr~=value](p[class~="special"]): 匹配属性名称为attr的元素的值恰好是value，或者class匹配属性包含一个或多个类名的元素，其中至少一个与value匹配。请注意，在多个类名称的列表中，单独的类用空格分隔。
[attr|=value](div[lang|="zh"]): 匹配属性名称为attr的元素，其值可以完全是value或可以以value开头，后跟连字符。
[attr^=value](li[class^="box-"]): 匹配属性名称为attr的元素，其值的开头为子字符串值。
[attr$=value](li[class$="-box"]): 匹配属性名称为attr的元素，该元素的值在其末尾具有子字符串值。
[attr*= ](li[class*="box"]): 匹配属性名称为attr的元素，该元素的值在字符串中的任何位置至少包含一次出现的子字符串值。
以上来源：MDN选择器
CSS选择器的优化
一、CSS识别顺序
CSS识别浏览器的顺序: 浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行。
二、选择器效率
提高选择器的性能的关键是: 越具体的关键选择器，其性能越高。
CSS选择器效率从高到低的顺序:
1.ID选择器 (#my-id)
2.类选择器 (.my-class-name)
3.标签选择器 (div)
4.相邻选择器 (h1 + p)
5.子选择器 (ul > li)
6.后代选择器 (li a)
7.通配符选择器 (*)
8.属性选择器 (a[attr="one"])
9.伪类选择器 (a:hover) / 伪元素选择器 (a::before)
注：综合上面的顺序，ID和类名用于关键选择器上效率是最高的，而CSS3的伪类/伪元素、属性选择器，虽然使用方便，但其效率却是最低的。
来源: CSS选择器的优化
以上内容如有不对,希望大家指出,谢谢。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。