前端开发 CSS 选择器

「前端开发」 -

CSS-Selector-03

CSS选择器 —— 伪类选择器

Posted by eliochiu on October 20, 2022

基本选择器和复合选择器都是选择页面中实际存在的元素，而有些时候我们需要具有给某种状态的元素指定样式，这时就可以使用伪类选择器（pseudo-class selector），伪类选择器的基本格式是:pseudo-name(params)。

结构伪类

选择根元素

:root用于选择HTML页面的根元素，通常为html标签。

选择空元素

:empty用于选择内容为空的元素，还可以结合元素选择器使用，例如

1
2
3

p:empty {
  display: none;
}

上述CSS样式能够实现隐藏空段落的效果。

特别注意的是，:empty匹配的是html中的所有空元素，包括内容为空的和空标签，即<img />、<input />也会被匹配

选择唯一的子代

:only-child用于选择其本身是其父元素唯一的子元素的元素。

  • 伪类选择器多数情况是选择一种状态，这种状态是元素本身的状态，不是其父元素的状态。
  • p:only-child选中的不是p元素的唯一子元素，而是：该元素是某个父元素的唯一子元素、且该元素刚好为p元素。
  • 使用:only-child伪类时，列出的元素未必是父子关系，如div :only-child，选中的是div的后代元素，并且该元素刚好是某个父元素的唯一子元素，而不一定是div的子元素。

:only-of-type用于选择本身是其父元素唯一一类子元素的元素。他和:only-child最大的区别是：

  • :only-child选中的元素没有任何兄弟元素
  • :only-of-type选中的元素没有和他类型一样的兄弟元素。

例如，现有下列css样式：

1
2
3
4
5
6
7

p:only-child {
  font-size: 20px;
}

span:only-of-type {
  color: red;
}

它对应的html代码为：

1
2
3
4
5
6
7

<div class="outer">
  <div class="inner">
    <p>我是inner中的p元素</p>
  </div>
  <p>我是<em>outer</em>中的p元素中<span>唯一的span元素</span></p>
  <p>我是<span>outer</span>中的p元素中的<span>span元素</span></p>
</div>
  • 文字我是inner中的p元素会被选中，字体变为20px，因为他是div.inner中的唯一子元素
  • 文字唯一的span元素会被选中，指定为红色，他虽然不是p的唯一子元素，但他是唯一一个span，因此被选中
  • 文字span元素不会被选中，因为他不是p元素中唯一一个span元素

特别要注意的是，only-of-type中的“唯一一类元素”是按元素划分的，而不是其他东西，比如：

1
2
3

p:only-of-type {
  color: red;
}

1
2
3
4

<div>
  <p class="unique">这是唯一一个unique类</p>
  <p></p>
</div>

很显然，上述所有元素都不会被指定样式，因为他们并不是div中唯一的p元素。

选择第一个和最后一个子代

:first-child用于选择其本身是其父元素第一个子元素的元素。

:first-of-type用于选择本身是其父元素某类子元素中第一个元素的元素。

:last-child用于选择其本身是其父元素最后一个子元素的元素。

:last-of-type用于选择本身是其父元素某类子元素中最后一个元素的元素。

原理和:only-child、:only-of-type类似，这里不再赘述。

选择每n个元素

:nth-child()用于选择其本身是其父元素的任意子元素，其中括号可以填数字，甚至可以填代数式。

nth-child()的两种参数：

  • 纯数字：如果括号内为纯数字$n$，则选中第$n$个子元素。例如nth-child(1)相当于:first-child。
  • 表达式：如果括号内为表达式an+b，则对n进行循环($n = 0, 1, 2…$)，得到的数字按照纯数字规则匹配
    • :nth-child(n)选中所有子元素，因为$n$遍历了所有值。
    • :nth-child(2n)选中所有偶数项的子元素，因为$n$取$0, 1, 2…$时，$2n$取$0, 2, 4…$
    • :nth-child(2n+1)选中所有奇数项的子元素，因为$n$取$0, 1, 2…$时，$2n+1$取$1， 3， 5…$
    • :nth-child(an+b)从第$b$个元素开始，每隔$a$个元素选择一次。

:nth-of-type()用于选择其本身是其父元素的某类元素中的任意元素，其中括号可以填数字，甚至可以填代数式，用法与nth-child()类似，不再赘述。

动态伪类

超链接伪类

:link：指代用作超链接的锚记（即拥有href属性），而且尚未被访问过的地址。

:visited：指代已经访问过地址的超链接。出于安全的考虑，能应用到已访问链接上的样式非常有限。

用户操作伪类

:focus：指代当前获得鼠标焦点的元素。（例如表单元素）。

:hover：指代当前鼠标指针放置其上的元素。

:active：指代当前用户激活的元素，例如用户按下鼠标一瞬间的那段时间。

关于超链接伪类和用户操作伪类的顺序推荐为link-visited-focus-hover-active，具体原因参见CSS特性章节。

UI状态伪类

UI状态伪类主要根据用户界面元素的状态选择元素。

:enabled：指代当前启用的用户界面元素，即接受输入的元素。

:disabled：指代当前禁用的用户界面元素，即不接受输入的元素。

:checked：指代当前用户或文档默认选中的单选按钮/复选框。

:valid：指代满足所有数据有效性语义的输入框。

:invalid：指代不满足所有数据有效性语义的输入框。

:optional：指代无需一定输入值的输入框。

:required：指代强制输入的输入框。

:read-write：指代用户可读写的输入框。

:read-only：指代不能由用户输入的输入框。

lang伪类和否定伪类

:lang()：用于根据文本使用的语言选择元素。

:not()：用于选择不满足某条件的元素

注意：否定伪类的括号里可以填入简单选择器（ID、class、element、attribute and universal）

CATALOG
    ▲ TOP