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
清除浮动 1 2 3 4 5 6 7 8 .clearfix :before ,.clearfix :after { content : '' ; display : table; height : 0 ; clear : both; visibility : hidden; }
苹果设备1px完美解决方案 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 @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; } }