CSS 伪类选择器

写了那么多的伪类选择器，有必要做个笔记总结一下

`:root`

顾名思义 root 元素就是 html 元素

`E:nth-child(n)`

E 元素不是其父元素的第 n 个子元素

`E:nth-last-child(n)`

E 元素是其父元素的倒数第 n 个子元素

p:nth-last-child(1) 同 p:last-child

`E:nth-of-type(n)`

属于父元素的特定类型的第 n 个子元素的每个元素

`E:nth-last-of-type(n)`

属于父元素的特定类型的倒数第 n 个子元素的每个元素

`E:first-child`

第一个子元素同 E:nth-child(1)

`E:last-child`

最后一个子元素同 E:nth-last-child(1)

`E:first-of-type`

第一个子类型同 E:nth-of-type(1)

`E:last-of-type`

最后一个子类型同 E:nth-last-of-type(1)

`E:only-child`

E是其父元素的唯一子元素

`E:only-of-type`

E是其父元素的特定类型的唯一子元素

关于 child 和 type

p:nth-child(3n) 这个选择器会查询每一个父元素的第三个子元素, 如果是 p 元素就会匹配

p:nth-of-type(3n) 这个选择器会查询每一个父元素的第三个 p 子元素

`E:empty`

E元素没有子元素因此像 hello 和   并不会被 p:empty 匹配到，但是  和  能够被匹配

这个选择器也会匹配一个空标签或自闭和标签比如   和 <input />

CSS Selectors 4 中还会有 p:blank 来匹配  

`E:lang(en)`

匹配以语言 en 表示的元素E 比如


<div lang="en"><q>This English quote has a <q>nested</q> quote.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote.</q></div>

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

`E:not(exception)`

『否定』选择器

匹配不符合参数选择器 exception 的元素

exception不能包含另外一个否定选择器

例如：

input:not([type=checkbox]):not([type=radio]) 会匹配除了 checkbox 和 radio 之外的所有 input 元素

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

p:not(.classy) { color: red; }
body :not(p) { color: green; }

`::before`

为当前元素创建一个子元素作为伪元素, 位于该元素之前

默认为行内元素

`::after`

为当前元素创建一个子元素作为伪元素, 位于该元素之后

在 css2 中使用 E:after E:before

`::first–letter`

匹配第一个字母

`::first–line`

匹配元素的第一行

`::selection`

匹配选中的文字

ccforward / cc

63.CSS 伪类选择器 #68