CSS 选择器指南

CSS 选择器指南

CSS（层叠样式表）是用于描述网页元素样式的标记语言。在 CSS 中，选择器是用于选择要应用样式的元素的模式。选择器是 CSS 中最重要的概念之一，通过熟练掌握选择器，你可以更好地控制和定制网页的样式。

基本选择器

在介绍更复杂的选择器之前，我们先来看一些基本的选择器：

1. 元素选择器

元素选择器是最简单的选择器之一，它通过元素的标签名选择元素。例如，要选择所有的段落元素，可以使用 p 选择器：

p {
  /* 样式规则 */
}

2. 类选择器

类选择器用于选择具有相同类名的元素。类名以.开头，后面跟着类的名称。例如，要选择所有具有类名为 “highlight” 的元素，可以使用 .highlight 选择器：

.highlight {
  /* 样式规则 */
}

3. ID 选择器

ID 选择器用于选择具有唯一 ID 的元素。ID 以#开头，后面跟着 ID 的名称。例如，要选择具有 ID 为 “logo” 的元素，可以使用 #logo 选择器：

#logo {
  /* 样式规则 */
}

4. 属性选择器

属性选择器用于选择具有特定属性的元素。例如，要选择具有 href 属性的所有链接元素，可以使用 [href] 选择器：

a[href] {
  /* 样式规则 */
}

组合选择器

CSS 还提供了多种组合选择器，这些选择器允许你根据元素之间的关系选择元素。

1. 后代选择器

后代选择器允许你选择作为另一个元素的后代的元素。后代选择器使用空格分隔两个选择器。例如，要选择所有段落元素中的 strong 元素，可以使用以下选择器：

p strong {
  /* 样式规则 */
}

2. 子元素选择器

子元素选择器与后代选择器类似，但是它只选择作为父元素直接子元素的元素。子元素选择器使用 > 分隔两个选择器。例如，要选择所有列表元素 ul 中的直接子元素 li，可以使用以下选择器：

ul > li {
  /* 样式规则 */
}

3. 相邻兄弟选择器

相邻兄弟选择器选择紧接在指定元素之后的元素。相邻兄弟选择器使用 + 分隔两个选择器。例如，要选择紧接在标题元素 h1 后面的段落元素 p，可以使用以下选择器：

h1 + p {
  /* 样式规则 */
}

4. 通用兄弟选择器

通用兄弟选择器选择位于指定元素之后的所有元素。通用兄弟选择器使用 ~ 分隔两个选择器。例如，要选择位于标题元素 h1 后面的所有段落元素 p，可以使用以下选择器：

h1 ~ p {
  /* 样式规则 */
}

更多选择器

除了基本选择器和组合选择器之外，CSS 还提供了其他选择器来满足更复杂的选择需求。以下是一些常用的选择器：

• 伪类选择器：伪类选择器允许你选择元素的特定状态或位置。例如，:hover 选择器用于选择鼠标悬停在元素上的状态。
• 属性选择器：属性选择器允许你选择具有特定属性值的元素。例如，[type="text"] 选择器用于选择具有 type 属性值为 “text” 的元素。
• 伪元素选择器：伪元素选择器用于选择元素的特定部分。例如，::before 选择器用于在元素的内容前插入生成的内容。