伪类选择器与属性选择器

,

伪类选择器

伪类选择器用于匹配处于特定状态的一个或者多个元素并为它们设置样式。CSS 中伪类选择器需要结合其他类型的选择器使用，使用方法为：选择器:伪类选择器。

伪类选择器分为两种：

  • 静态伪类：只能用于超链接的样式
    • :link 超链接点击之前
    • :visited 链接被访问之后
  • 动态伪类：针对于所有标签都适用的样式

合理使用伪类选择器可以令元素在不同状态下呈现出不同的动画效果，比如超链接标签具有4种状态，分别对应四种伪类选择器：

  • :link 超链接点击之前
  • :visited 超链接被访问之后
  • :hover 鼠标放在标签上的时候
  • :activate 鼠标点击标签不松手的时候

需要注意的一点是，在 CSS 的规定中，这四个选择器必须按照以上顺序来写，否则将会失效，如下所示。

1
2
3
4
a:link { color: blue;}
a:visited { color: red;}
a:hover { color: green;}
a:active { color: yellow;}

常见的 CSS 伪类选择器可以参考下表：

选择器 意义
:activate 选择所有活动的链接
:after 在所选元素之后插入内容
:before 在所选元素之前插入内容
:checked 选择所有被选中的元素
:disabled 选择所有被禁用的元素
:enabled 选择所有启用的元素
:first-child 选择任意元素中的第一个被选择器选择的元素
:focus 选择获取到焦点的元素
:hover 选择鼠标悬浮在其上的元素
:invalid 选择所有无效的元素
:last-child 选择所有的最后一个子元素
:link 选择所有未访问的链接
:not(selector) 选择所有selector以外的元素
:only-child 选择所有仅有一个子元素的元素
:optional 选择所有不包含 required 属性的元素
:read-only 选择所有只读属性的元素
:required 选择所有具有 required 属性的元素
:root 选择文档的根元素
:visited 选择所有访问过的链接
:valid 选择所有有效的元素

属性选择器

属性选择器可以为带有特定属性的 HTML 元素设置样式，使用方法为：CSS[attribute]，例如以下代码，可以将输入框中的文字变更为绿色：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type] { color: green;}
    </style>
  </head>
  <body>
    <input type="primary" />
    <input type="link">
  </body>
</html>

除此之外，属性选择器还有以下用法：

CSS[attribute="value"]，该选择器用于选取带有指定属性和值的元素，如下例，选取所有 type 属性值为 primary的元素。

1
2
3
input[type="primary"]{
    color: green;
}