二维码

伪类选择器

伪类选择器

伪元素(pseudo-element)是 HTML 中并不存在的元素。例如,定义第一个字母或第一行文字时,并未在HTML中作相应的标记。

伪类(pseudo-class)是浏览器根据网页元素的状态,自动提供的 CSS 类,无需在 HTML 代码显式标记这些类。例如,使用:first-child可以选择某元素的第一个子元素,你就不用写成class=“first-child”。更多关于伪类的内容。

伪元素有四个。

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

伪类

  • :first-child
  • :link:新的、未访问的链接
  • :visited:访问过的链接
  • :focus:链接获得焦点(如通过Tab键)
  • :hover:当访问者将鼠标指针停留在链接上时
  • :active: 当访问者激活链接时
  • :empty:空选择器

新的、未访问的链接显示为红色;访问过的链接变为橙色;

概述

CSS 2.1非常有限,只提供了三个伪类。

  • :active
  • :focus
  • :hover

CSS Selector Level 3添加了更多与HTML表单相关的伪类:

  • :enabled
  • :disabled
  • :checked
  • :indeterminate

CSS Basic UI Level 3添加了许多伪类来描述窗口小部件的状态:

  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write

:first-child,:last-child

:first-child表示一组元素的第一个元素,且该元素必须是父元素的第一个子元素。

1
2
3
4
5
6
7
li{
color: blue;
}

li:first-child {
color: green;
}

上面代码中,第一个li的字体颜色为绿色,其他li都为蓝色。

:last-child表示一组元素之中的最后一个,且该元素必须是父元素的最后一个子元素。

1
2
3
li:last-child {
background-color: lime;
}

:first-of-type,:last-of-type

:first-of-type选中一组元素之中的第一个元素。

1
2
3
p:first-of-type {
font-size: 1.25em;
}

上面代码中,p:first-of-type只会选中第一个p元素。

:first-of-type:first-child的区别是,后者必须父元素的第一个子元素。

1
2
3
4
5
<ul>
<p>Hello World</p>
<li>1</li>
<li>2</li>
</ul>

上面这段 HTML 代码,如果想让第一个<li>显示为绿色,必须使用:first-of-type,而不能是:first-child

1
2
3
4
5
6
7
8
9
/* 正确 */
ul li:first-of-type {
color: green;
}

/* 错误 */
ul li:first-child {
color: green;
}

:last-of-type选中本类之中最后一个元素。

1
2
3
p:last-of-type {
font-size: 0.75em;
}

上面代码中,p:last-of-type只会选中最后一个p元素。

:nth-child(),:nth-last-child()

:nth-child()选中指定位置的子元素。:nth-last-child()选中指定的倒数位置的子元素。

1
2
3
p:nth-child(2) {
color: red;
}

上面代码中,:nth-child()选中所有第二个子元素位置的p元素。

注意,如果元素名与:nth-child()之间有没有空格,含义是不一样的。没有空格时,表示匹配该种子元素;有空格时,表示匹配该元素的子元素。

1
2
3
p :nth-child(2) {
color: red;
}

上面代码表示,匹配p元素内部的第二个子元素,而不是匹配p元素本身。

:nth-child():nth-last-child()可以使用通配符作为参数,参见:nth-of-type()部分的说明。

1
2
3
ul li:nth-child(3n+3) {
color: #ccc;
}

上面代码选中3、6、9等位置的li元素,n表示整数序列0、1、2、3……。

这里还有一个技巧,如果要选中前三个元素,可以在n前面使用负数符号1-

1
2
3
ul li:nth-child(-n + 3) {
color: #ccc;
}

上面代码只会选中前三个li,因为当n大于等于3时,-n + 3会小于等于0,而li的序号是从1开始的。

相应的,:nth-last-child(-n + 3)就会选中最后三个元素,而:nth-last-child(n + 4)会选中除了最后三个以外的其他元素。

除了使用An + B这种形式的表达式指定位置,还可以使用oddeven关键字,分别表示奇数位置或偶数位置的元素。

1
2
3
ul li:nth-child(odd) {
color: #ccc;
}

:nth-of-type(),:nth-last-of-type()

:nth-of-type()匹配指定类型和位置的元素,:nth-last-of-type()匹配倒数位置的指定类型和位置的元素。

1
2
3
p:nth-of-type(2) {
color: red;
}

上面代码中,p:nth-of-type(2)匹配第二个p元素。

下面是通配符用法。

1
2
3
4
5
6
7
li:nth-of-type(2n) {
background: lightslategrey;
}

li:nth-of-type(3n+2) {
background: blue;
}

:nth-of-type的参数可以是an + b的形式。

  • “a”是一个整数
  • “n”作为英文字母,总是不变的,含义是“0, 1, 2, …”
  • “+”作为一个运算符,可以是“+”,也可以是“-”
  • “b”是一个整数,如果提供了运算符,就必须提供“b”

:nth-of-type的参数还可以是evenodd

1
2
3
li::nth-of-type(odd)  {
background: lightslategrey;
}

空选择器

:empty是空选择器,匹配没有任何子节点的元素。

1
2
3
p:empty {
color: red;
}

下面的 HTML 代码都匹配:empty选择器。

1
2
3
4
5
<!-- 闭合标签之间没有空格 -->
<p></p>

<!-- 闭合标签之间只有注释 -->
<p><!-- comment --></p>

下面的 HTML 代码都不匹配:empty选择器。

1
2
3
4
5
6
7
8
9
10
<!-- 闭合标签之间有空格 -->
<p></p>

<!-- 闭合标签之间有换行符 -->
<p>
<!-- comment -->
</p>

<!-- 闭合标签有子元素 -->
<p><span></span></p>

这个选择器的一个作用,就是使用脚本动态添加子元素后,将该元素显示出来。

1
2
3
4
5
<!-- No error message -->
<div class="error"></div>

<!-- Yes error message -->
<div class="error">Missing Email</div>

上面代码中,为<div>标签添加文本内容后,使用下面的 CSS 代码将其显示出来。

1
2
3
4
5
6
7
8
.error:empty {
display: none;
}

.error:before {
color: red;
content: "\0274c "; /* ❌ icon */
}

选中非空元素可以像下面这样写。

1
2
3
4
.alert:not(:empty) {
background: pink;
padding: 10px;
}

参考链接


本教程来自“网道项目”(wangdoc.com),采用知识共享 署名-相同方式共享 3.0协议