CSS 伪类、伪元素选择器（CSS Pseudo-Class Selectors and Pseudo-Element-Selectors）

“In contrast to standard CSS selectors, pseudo selectors allow you to alter the appearance of a state or fragment of an element. They are divided into pseudo class selectors and pseudo element selectors.” – From Web Developer Reading List: CSS Pseudo-Class Selectors

CSS 的选择器是学习 CSS 时很重要的一部分。除了基本的标签选择器、ID 选择器、类选择器等，CSS 中还提供的一种伪选择器尤其值得关注。在实践中，伪选择器往往会给我们带来不一样的惊喜。伪选择器分为 伪类选择器 和 伪元素选择器 ：

• 伪类选择器 - 通常用来描述一个标签在不同的状态下的样式，比如 :hover、:empty 等，
• 伪元素选择器 - 通常用来控制某块内容的一部分的样式，比如一段文字的第一行或者第一个字母等。

CSS 伪类选择器

伪类名称	描述	CSS版本
:link	选择所有未被访问过的链接	1
:visited	选择所有被访问过的链接	1
:hover	选择鼠标指针位于其上的元素	1
:active	选择所有被用户激活过的元素	1
:focus	选择拥有输入焦点的元素	2
:first-child	选择属于父元素的第一个子元素的每个该元素	2
:last-child	选择属于其父元素最后一个子元素每个该元素	3
:first-of-type	选择属于其父元素的首个该元素的每个该元素	3
:last-of-type	选择属于其父元素的最后该元素的每个该元素	3
:only-of-type	选择属于其父元素唯一的该元素的每个该元素	3
:only-child	选择属于其父元素的唯一子元素的每个该元素	3
:nth-child(n)	选择属于其父元素的第n个子元素的每个该元素	3
:nth-last-child(n)	选择属于其父元素的倒数第n个子元素的每个该元素	3
:nth-of-type(n)	选择属于其父元素第n个元素的每个该元素	3
:nth-last-of-type(n)	选择属于其父元素第n个该元素的每个该元素。	3
:not(S)	选择非该元素的每个元素	3
:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	选择当前活动的锚点元素。	3
:enabled	选择每个启用的元素	3
:disabled	选择每个禁用的元素	3
:checked	选择每个被选中的元素	3
:required	选择设置了 “required” 属性的元素	3
:valid	选择表单元素中输入值满足验证的元素	3
:invalid	选择表单元素中输入值不满足验证的元素	3

CSS 伪元素选择器

伪元素名称	描述	CSS版本
::first-line	选择元素内容的第一行	1
::first-letter	选择所选元素的第一个文字	1
::before	在所选元素之前插入内容	2
::after	在所选元素之后插入内容	2
::selection	改变所选文本的样式	3

⚠️注意：伪类元素和伪元素选择器可以组合使用。

巧用伪选择器

使用 :before :after 清除浮动

.clearfix:before,
.clearfix:after {
 content: '';
 display: table;
 height: 0;
 clear: both;
 visibility: hidden;
}

苹果设备1px完美解决方案

@media (-webkit-min-device-pixel-ratio: 2) {
  li:after {
    pointer-events: none;
    content: '';
    border: 1px solid #dcdcdc;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
 }
}