CSS3选择器/伪类的那些事~

article h2：后代选择器：选择指定祖先元素内的后代元素

article > h2：子元素选择器：选择指定父元素内的直接子元素

h2~p 选择器是一个普通兄弟选择器，查询h2元素后面的拥有共同父元素的兄弟元素p。因此若p元素要被选择，必须跟在h2元素后面。

h2 + p 子元素选择器 选择第一个元素后紧跟的元素,两者拥有相同的父元素

a[href*=”login”]表示a元素的href值为login

a[href^=”https://”]在方括号内，属性名与等号间使用抑扬音符(^)表示属性值以某个特定值开头。

a[href$=".pdf"] {...} 与属性开头选择器相反，我们也可以使用属性结尾选择器。这里在方括号内利用$符号替换刚才的^，放在属性名与等号之间。$符号表示属性值以一个特定的值结尾。

a[rel~=”tag”] {…}， 有时属性名可能是空格分隔的多个单词组成的，而我们需要匹配其中的一个单词来选择元素。这种情况下可以在方括号内，属性名与等号之间使用波浪线~,这表示属性值可能被空格分割为多个单词，而其中一个单词匹配特定值。

a[lang|=”en”] {…} 当属性值包含连字符而不是空白时，竖线|可以写在方括号里，放在属性名与等号之间。这表示属性值可能由连字符分割，而连字符分割的几个单词必须匹配一个特定值。

a[href*=”login”] 属性包含选择器 选择一个属性值包含特定值的元素

[class=’classname’]：代表有一个元素的属性是“classname”；

a标签的伪类顺序是这样的：link,visited,hover,active

根据用户的行为可以将伪类添加到一个元素上，比如：:enabled,:disabled:checked :indeterminate;

首先与大家见面的结构性伪类是:first-child, :last-child, 以及:only-child伪类。:first-child伪类会选择父元素下的第一个子元素，而:last-child伪类会选择父元素下的最后一个子元素。这些伪类对于选择列表中的首项或末项极其有用。此外，若父元素下面只有一个子元素，这个元素将会被:only-child伪类选择。因此这个伪类也可以写成:first-child:last-child ，不过:only-child的写法权重要低些。

选择器 li:first-child 标记了列表中的第一个元素而li:last-child标记了列表中的最后一个元素。因此第二行与第十行代码里的li被应用样式加粗。选择器 div:only-child寻找一个div元素，而这个div元素的父元素只含有一个子元素。因此第四行代码的div被选中 应用样式加粗，因为他是相对应的列表元素仅有的一个子元素。

:first-of-type, :last-of-type, & :only-of-type

寻找到特定父元素的首个子元素，最后一个子元素，以及仅有的子元素是很有用的，而且很多时候这也是需求。不过有时对于某元素，你只想找到特定类型的子元素。比如我只想得到文章的第一段或者最后一段，或者文章中唯一的图片。很幸运的是我们可以利用first-of-type, :last-of-type, 与 :only-of-type 三个伪类来完成。

:first-of-type伪类会选择父元素下某种子元素的第一个，而 :last-of-type伪类会选择父元素下某种子元素的最后一个。若元素是父元素的子元素，且只有一个这种类型的子元素，那这个元素会被 :only-of-type伪类选择。

最后这里有一些基于代数表达式来选择元素的伪类。这些伪类包括:nth-child(n), :nth-last-child(n), :nth-of-type(n)与 :nth-last-of-type(n)。这些独特的伪类均以nth前缀开头，括号内接收一个以n作为参数的代数表达式。

括号内以数字作为表达式，可以直接决定哪个元素被选择。直接使用数字可以从文档树开头或结尾算起，计入单独的元素。而利用n作为参数的代数表达式，可以同样从从文档树开头或结尾算起，批量选择一组元素。

使用伪类数字或表达式

刚才也提到了，括号内以数字作为表达式，可以从文档树开头或结尾算起，计入单独的元素。举例来讲，li:nth-child(4)会选择列表项中第四个元素。从列表第一个元素开始计算，每次计数增加1，对应每一个列表元素，直到找到第四个列表元素。当直接使用数字时，数字必须为正数

伪类表达式为这些格式:an, an+b, an-b, n+b, -n+b, -an+b.这些都会被解释并阅读为(a×n)±b。变量a代表乘数，表示每a的倍数个元素，而b变量表示从a的倍数个元素开始，加减计数的个数，从而选择元素。

比如li:nth-child(3n)选择器，会选择列表内每3的倍数个列表元素。利用表达式计算的结果：3×0, 3×1, 3×2，等等。你可以看到结果是3 6这些3的倍数，即第3 6个元素被选择。

此外 与奇数偶数相关的关键字作为值也可以。如预期结果，两个值分别可以选择第奇数个与偶数个元素。其中关键词也可以用表达式来表示，其中“2n+1”将选择所有奇数（odd），而“2n”将选择所有偶数（en）。

使用li:nth-child(4n+7) 选择器，可以从第4的倍数个元素开始计算，直到识别第七个元素。使用这个表达式计算出的值等同于 (4×0)+7, (4×1)+7, (4×2)+7，结果是第7个，第11个，第15个等，选择出4的倍数加7。

当n参数前面不加数字前缀时，等同于a变量被解释为1.比如使用i:nth-child(n+5)，那么每个列表元素都会做为计算起点，之后计算第五个元素。结果就是前四个元素不会被选择，因为表达式计算出的结果是(1×0)+5, (1×1)+5, (1×2)+5 等。

更复杂一点也可以使用负数。举例来讲 li:nth-child(6n-4) 选择器会帝从6的倍数个列表元素开始计算，之后往前面计算4个，结果就是第2个，第8个，第14个等。li:nth-child(6n-4)也可以写成li:nth-child(6n+2)，这样就不用使用负数了。

若参数a，或者n为负数，那么紧跟着的b参数，必须为正数。当a为负数时，或者n为负数时，b实际上标志了被计算的“最大数”。举例来讲 li:nth-child(-3n+12) 选择器的范围在前12个列表元素之内(因为最大只能是12了)，li:nth-child(-n+9) 只能选择前九个元素，这时候n前面没有系数a，可以被认为是-1。

:nth-child(n) & :nth-last-child(n)

当我们对伪类的数字与代数表达式如何计算做了一个大概了解后，我们来看看实际应用中如何使用这些数字与代数表达式。首先以:nth-child(n)和:nth-last-child(n) 开始。这两个伪类的表现很类似:first-child 与:last-child伪类，因为他们都会寻找父元素下的子元素，然后只选择一个匹配给定值的元素。:nth-child(n) 伪类从文档树开头开始计算，而:nth-last-child(n) 则从文档树尾部开始计算。

li:nth-child(-n+4)选择器识别了列表中最开始的四个元素，其余列表元素不被选择。第二行至第五行四个元素被选中，应用加粗样式。

用 :nth-last-child(n) 伪类替换:nth-child(n) 改变了计数的方向，当你从文档树末尾开始计算时，请使用:nth-last-child(n) 伪类。如li:nth-last-child(3n+2) 这个会从列表末尾开始，选择列表中每三个一组，之后数两个元素，朝着列表开头去计数。这里第三行与第六行的代码被选择，应用样式加粗。

:nth-of-type(n) & :nth-last-of-type(n)

:nth-of-type(n) 与:nth-last-of-type(n)伪类与 :nth-child(n) 和:nth-last-child(n) 伪类很类似。而与后者不同的是，nth-of-type伪类只会选择那些指定类型(type)的元素。举例来讲，当计算文章中有几段时， :nth-of-type(n) 与:nth-last-of-type(n)伪类会忽略标题元素(h1之类)，块元素(div)这些不是段落元素p的元素。而 :nth-child(n) 和:nth-last-child(n) 伪类则会计入所有的元素，而不考虑元素的类型，只需要元素匹配即可。另外所有可以用在:nth-child(n) 和:nth-last-child(n) 伪类中的n表达式，在 :nth-of-type(n) 与:nth-last-of-type(n)伪类中也是可用的。

我们使用p:nth-of-type(3n) 选择器，父元素相同的每三个p元素会被我们选择一个，而会忽略同级的其他类型的元素。这里第五行与第九行的元素会被选择，应用加粗的样式

与:nth-child(n)跟 :nth-last-child(n)的关系类似，:nth-of-type(n) 与:nth-last-of-type(n)两个伪类，前者是从文档树开头开始计算，后者是从文档树尾部开始计算。

利用p:nth-last-of-type(2n+1) 这个选择器，从最后一段往前计算，每两个段落可以被标记选中。这里代码4，7，9行的段落元素被选中，应用样式加粗。

当用户访问一个页面时，如果他的URI片段标识符为hello,与section的id属性相同，通过使用:target伪类，section就会被应用样式。如果URI片段标识符变更，且匹配某元素的id属性，通过使用:target伪类，这个元素就会被应用样式

:empty”伪类将选择不包含子元素或者文本的元素。当然，注解、处理指令和空的文本节点并不属于这个范围内。

使用“div:empty”伪类选择器，将选择没有任何子元素或者文本内容为空的“div”元素。以下的示例将选择标记2和标记3，因为他们是完全空的。尽管第二个标签中包含了一个注解标签，但注解标签并不会当作“div”的子元素，因此也属于空的标签。第一个div标签内包含了一个文本，第三个div标签包含了一空白文本空间，最后一个div里包含了一个strong标签，因此这三个标签都被排除未被选择。

否定伪类

否定伪类 :not(x) 在选择的元素集合中，通过一个声明来过滤掉符合某种条件的元素。p:not(.intro)选择器利用否定伪类，来匹配所有类名不包含intro的段落元素。通过选择器开头的p来匹配段落元素，之后通过否定伪类括号内的内容来过滤元素，在这里是一个类名.intro。

下面的div:not(.awesome) 与 :not(div)均使用了否定伪类。div:not(.awesome) 选择器识别了不包含awesome类名的div元素。而:not(div) {…} 选择器识别了不是div元素的元素。结果第一行的div元素被匹配，第三行的section元素也被匹配，这些元素被应用样式加粗。唯一未被选中的元素是一个拥有类名awesome的div元素，他被两个否定伪类排除在外。

a:link 链接(link)伪类 选择一个用户没有访问过的链接

a:visited 链接(link)伪类 选择一个用户访问过的链接

a:hover 行为性伪类 选择一个用户将鼠标指针悬浮在上方的元素

a:active 行为性伪类 选择一个用户使用中的元素

a:focus 行为性伪类 选择一个拥有用户焦点的元素

input:enabled 状态性伪类 选择一个处于可编辑状态(默认)下的元素

input:disabled 状态性伪类 选择一个通过设置disabled属性而处于不可编辑状态下的元素

input:checked 状态性伪类 选择一个被选中的单选或者复选按钮

input:indeterminate 状态性伪类 选择一个处于不确定状态下的单选或者复选按钮(可能被选中或者不被选中)

li:first-child 结构性伪类 选择父元素下的第一个子元素

li:last-child 结构性伪类 选择父元素下的最后一个子元素

div:only-child 结构性伪类 如果某个元素是它父元素中惟一的子元素,那么将会被匹配

p:first-of-type 结构性伪类 选择父元素中同类型的第1个子元素

p:last-of-type 结构性伪类 选择父元素中同类型的最后一个子元素

img:only-of-type 结构性伪类 若元素为父元素中同类型的唯一元素，则会被匹配

li:nth-child(2n+3) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，来计算所有元素

li:nth-last-child(3n+2) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，来计算所有元素

p:nth-of-type(3n) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，只计算文档树中给定类型的元素

p:nth-last-of-type(2n+1) 结构性伪类 当父元素中子元素的序列匹配所给数字时会被选中，会以文档树开头作为起点，只计算文档树中给定类型的元素

section:target 目标伪类 选择URI片段标示符的值指向的元素

div:empty 空伪类 选择没有任何子元素或者文本的元素

div:not(.awesome) 否定伪类 选择不匹配某个状态标示符的元素

伪元素并不存在于dom树中，是一种动态元素。通过选择器操纵伪元素，可以给页面的一些特殊部分应用样式。有个要点需要注意，一个选择器只能给一个伪元素，比如：“.el:before”，但不能同时存在多个，比如：“.el:before:after”。

首先发布的两个伪元素是:first-letter 与:first-line 文本伪元素。:first-letter 会匹配一个元素内文字的第一个字母，:first-line 则会匹配第一行。

生成内容伪元素

:before与:after生成内容伪元素向被选择的元素内部追加新的行内伪元素。这一类伪元素最普遍的用法，是配合content属性，向页面内添加一些不太重要的内容，但并不常常如此。伪元素不需要使用额外的元素标签，就可以向页面添加一些用户界面相关的内容。

:BEFORE 伪元素可以在被选择元素前创建伪元素，而:AFTER伪元素可以被选择元素后面创建伪元素。这些伪元素嵌入被选择元素内，而不是外面。下面的:after伪类用来在链接内利用括号显示a标签的href属性。这里的信息是有帮助的，但最终，不需要所有浏览器支持这些伪元素。

片段伪元素

::selection片段伪元素选择通过用户操作所选定或者高亮的部分，选定的部分会被应用样式，不过只能使用color,background,background-color,text-shadow属性。值得注意的是background-image属性会被忽略。当利用缩写的background属性来定义样式时，只有背景色会生效，任何图片都会被忽略。

单个冒号（:）和双冒号（::）

片段伪元素是css3新增加的内容，为了与伪类所区别，伪元素前前面用双冒号表示。很幸运的是大部分浏览器都支持单引号与双引号两种方式，不过 ::selection伪元素前面必须以双引号开头。

在 ::selection片段伪元素的帮助下，选择下面的示例文字后，背景会变橙色(orange)，且文字阴影会去掉。同时注意使用 ::-moz-selection，增加火狐的浏览器前缀来确保这特性在所有浏览器下都支持完美。

.alpha:first-letter 文本伪元素 选择元素内文本的第一个字母

.bravo:first-line 文本伪元素 选择元素内文本的第一行

div:before 生成的内容 在被选择元素前创建伪元素

a:after 生成的内容 在被选择元素末尾创建伪元素

::selection 片段伪元素 选择通过用户操作所选定或者高亮的部分