css偶数选择器以及用法（web前端三大主流框架）

元素。

CSS选择器如此之多，你了解多少？

A标签伪类选择器

:link a:link 所有未被访问的链接(a标签的默认样式)。

:visited a:visited 所有已被访问的链接。

:active a:active 点击后没有松开鼠标的链接。

:hover a:hover 鼠标指针位于其上的链接。

:before / :after

在元素的内容之前插入内容。

div:before{ content: \'\'; display: block; background: red; width: 30px; height: 10px;}div:after{ content: \'\'; display: block; background: green; width: 30px; height: 10px;}

CSS选择器如此之多，你了解多少？

:first-child

p:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。(注意和:first-of-type做区分)

CSS选择器如此之多，你了解多少？

:first-of-type

p:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。(注意和:first-child做区分)

CSS选择器如此之多，你了解多少？

:last-child

p:last-child 表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效(注意和:last-of-type做区分)

CSS选择器如此之多，你了解多少？

:last-of-type

p:last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。(注意和:last-child做区分)

CSS选择器如此之多，你了解多少？

:only-child

p:only-child 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素

CSS选择器如此之多，你了解多少？

:only-of-type

p:only-of-type 表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的

CSS选择器如此之多，你了解多少？

:nth-child(n)

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

CSS选择器如此之多，你了解多少？

:nth-child(odd)或者:nth-child(2n+1) 奇数行、:nth-child(even)或者:nth-child(2n+2) 偶数行

CSS选择器如此之多，你了解多少？

:nth-last-child(n)

p::nth-last-child(n) 同上，从最后一个子元素开始计数。

CSS选择器如此之多，你了解多少？

:empty

p:empty 选择没有子元素的每个

元素（包括文本节点）。

CSS选择器如此之多，你了解多少？

:not(selector)

:not(p) 选择非p元素的每个元素。

CSS选择器如此之多，你了解多少？

input状态选择器

:focus 获得焦点的 input 元素

:enabled 每个启用的 input 元素

:disabled 每个禁用的 input 元素

:checked 每个被选中的 input 元素