伪类(Pseudo classes)
由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类。
语法:selector:pseudo-class {}
:root
选择 html 元素,在声明全局 CSS 变量时很有用。
:root {
--first-color: #488cff;
--second-color: #ffff8c;
}
#firstParagraph {
background-color: var(--first-color);
}
#secondParagraph {
background-color: var(--second-color);
}
:target
若当前页面 URL 为:http://a.cn/index.html#section2
,则<section id="section2">Example</section>
可以通过 :target
选中。
:first-child
选择作为一组兄弟元素中的第一个元素,与父元素如何无关!
p:first-child
选择 p 元素,要求该元素是一组兄弟元素中的第一个元素(即 p 元素前面没有兄弟元素)。
p > i:first-child
选择 i 元素,要求:① 该 i 元素的父元素是 p 元素。② 该 i 元素是一组兄弟元素中的第一个元素。
p:first-child i
选择 i 元素,要求:① 该 i 元素的父元素是 p 元素。② 该 p 元素是一组兄弟元素中的第一个元素
:first-of-type
选择第一次出现的元素,相比于 :first-child
,不要求没有前兄弟节点。
-
p:first-of-type
选择 p 元素,要求该元素是某层级中第一次出现的 p 元素(与p 元素前面有没有兄弟元素无关)。
:last-child 和 :last-of-type
:first-child
和 :first-of-type
的区别在于是否有 前兄弟元素,:last-child
和 :last-of-type
的区别在于是否有 后兄弟元素。
-
p:last-child
选择 p 元素,要求该元素是一组兄弟元素的最后一个元素。 -
p:last-of-type
选择 p 元素,要求该元素是一组元素中最后一次出现的 p 元素,与该 p 元素后面是否还有兄弟元素无关。
:nth-child(an+b)
先找到一组兄弟元素,然后从 1 开始排序,选择符参数次序要求的元素。a、b 必须是整数。
-
div:nth-child(0n+1)
匹配一组兄弟元素中的第一个元素,且该元素是 div 元素。等同div:nth-child(1)
div:first-child
。 -
tr:nth-child(odd)
匹配表格中的奇数行,等同tr:nth-child(2n+1)
-
tr:nth-child(even)
匹配表格中的偶数行,等同tr:nth-child(2n+0)
-
span:nth-child(-n+3)
匹配前三个子元素中的 span 元素 -
.a span:nth-child(2n+1)
匹配 span 元素,要求:① 父元素的类为 a。② 该 span 元素在所在组兄弟元素中,次序为奇数
:nth-child()
与 :nth-last-child()
相反。
:nth-of-type(an+b)
针对具有一组兄弟节点的标签, 用参数来筛选出在一组兄弟节点的位置。
/* 奇数段 */
p:nth-of-type(2n+1) {
color: red;
}
<div>
<p>这是第一段。</p><!-- 被选择 -->
<div>这段不参与计数。</div>
<p>这是第二段。</p>
<p>这是第三段。</p><!-- 被选择 -->
</div>
:nth-of-type()
与 :nth-last-of-type()
相反。
其他伪类
-
a:link
未访问的链接 -
a:visited
已访问的链 -
a:hover
鼠标划过链接 -
a:active
已选中的链接 -
:checked
选择选中状态下的 radio 元素、checkbox 元素或 select 的 option -
:disabled
选择被禁用的元素 -
:enabled
选择被启用的元素 -
div:focus
当 div 元素获得焦点时将被选中 -
div:focus-within
即使是 div 的子元素——而不是 div 自身获得焦点,也能被选中 -
p:not(.fancy)
选择类名不是 fancy 的 p 元素 -
:empty
选择元素内无任何子元素、文本、空格的元素 -
:only-child
匹配没有兄弟元素的元素,等同:first-child:last-child
或nth-child(1):nth-last-child(1)
-
main :only-of-type
选择 main 元素下只出现一次的元素 -
:valid
和invalid
分别选择通过验证、未通过验证的表单元素
伪元素(Pseudo elements)
CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。
语法:selector::pseudo-element {}
。伪元素通常用两个冒号 ::,以便与伪类区别。
伪元素可以和伪类一起使用。
::before 和 ::after
创建一个伪元素,其将成为匹配选中的元素的第一个/最后一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
content 仅能用于 ::before
和 ::after
中,值有以下几种:
div::before {
content: none;
content: normal;
content: 'some text';
content: url(pic.jpg);
content: attr();
}
当值为 none 或 normal 时,伪元素无效;若想使用伪元素但又不想添加字符或图片,可以 content: ''
::first-letter
选中块级元素第一行的第一个字。允许设置的属性:与文字相关的属性、背景、边框、内边框、外边框。
::first-line
选中块级元素的第一行。允许设置的属性:与文字相关的属性、背景。
::selection
选中被用户选中的文字。允许设置的属性:color、background-color、cursor、caret-color、outline、text-decoration、text-emphasis-color、text-shadow。