CSS 中的伪类和伪元素

时间:2022-05-30 00:42:52

伪类(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-childnth-child(1):nth-last-child(1)
  • main :only-of-type 选择 main 元素下只出现一次的元素
  • :validinvalid 分别选择通过验证、未通过验证的表单元素

伪元素(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。

参考资料