知识库

Appearance

Return to top
On this page

CSS 选择器

CSS 选择器用于选择需要添加样式的 HTML 元素。

概述

CSS 选择器是 CSS 规则的第一部分，它定义了哪些 HTML 元素会受到样式规则的影响。

选择器类型

基础选择器

元素选择器

选择特定的 HTML 元素：

css
p {
  color: blue;
}

类选择器

通过 class 属性选择元素：

css
.warning {
  color: red;
}

ID 选择器

通过 id 属性选择单个元素：

css
#header {
  background-color: #f0f0f0;
}

通用选择器

选择所有元素：

css
* {
  margin: 0;
  padding: 0;
}

属性选择器

根据属性选择元素：

css
input[type="text"] {
  border: 1px solid #ccc;
}

a[href^="https://"] {
  color: green;
}

伪类选择器

选择元素的特定状态：

css
a:hover {
  color: blue;
}

li:first-child {
  font-weight: bold;
}

input:focus {
  outline: 2px solid #007cba;
}

伪元素选择器

选择元素的特定部分：

css
p::first-line {
  font-weight: bold;
}

p::before {
  content: "→ ";
}

组合器

后代选择器

css
div p {
  color: gray;
}

子选择器

css
div > p {
  margin: 10px;
}

相邻兄弟选择器

css
h1 + p {
  margin-top: 0;
}

通用兄弟选择器

css
h1 ~ p {
  color: #666;
}

选择器优先级

CSS 选择器有特定的优先级权重：

  1. 内联样式 (1000)
  2. ID 选择器 (100)
  3. 类选择器、属性选择器、伪类 (10)
  4. 元素选择器、伪元素 (1)

最佳实践

  • 避免过度嵌套选择器
  • 使用语义化的类名
  • 考虑使用 CSS 预处理器来组织选择器