【CSS】选择器详解

一、分类

• 简单选择器（根据名称、id、类来选取元素）
• 组合器选择器（根据它们之间的特定关系来选取元素）
• 伪类选择器（根据特定状态选取元素）
• 伪元素选择器（选取元素的一部分并设置其样式）
• 属性选择器（根据属性或属性值来选取元素）

二、简单选择器

分类：

• 类选择器
• id选择器
• 通用选择器
• 元素选择器
• 分组选择器

三、组合器选择器

分类：

• 后代选择器 (空格)
• 子选择器 (>)
• 相邻兄弟选择器 (+)
• 通用兄弟选择器 (~)

注意：后代选择器里说的后代不止有儿子，可能有孙子，孙子的儿子，孙子的孙子…只要是他的后代， 但是子选择器只包括儿子

四、伪类选择器

1.定义：

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

2.语法：

selector:pseudo-class {
  property: value;
}

锚伪类：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后（当然这两个也可以不定义），才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

3.所有CSS伪类

五、伪元素选择器

1.定义

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

2.语法

selector::pseudo-element {
  property: value;
}

3.示例

下面的例子为所有 <p> 元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

注意：在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

4.所有伪元素

六、属性选择器

1.定义

为带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

2.示例

CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

a[target] {
  background-color: yellow;
}

3.所有属性选择器

想要学习更多请移步：CSS 选择器