CSS 常见选择器

1. 基础选择器

• 元素选择器
  选择所有指定类型的 HTML 元素。

p {color: blue;
}

选择所有 p 标签，并将文字颜色设为蓝色。

• 类选择器
  选择带有特定类名的元素，类名前加 .。

.container {margin: 20px;
}

选择类名为 container 的所有元素。

• ID 选择器
  选择带有特定 ID 的元素，ID 前加 #。

#header {background-color: gray;
}

选择 ID 为 header 的元素。

2. 组合选择器

• 后代选择器
  选择某个元素内的所有指定后代元素。

div p {font-size: 16px;
}

选择所有位于 div 内的 p 标签。

• 子选择器
  选择某个元素的直接子元素。

div > p {color: green;
}

选择 div 的直接子元素 p。

• 相邻兄弟选择器
  选择紧跟在某个元素之后的相邻兄弟元素。

h1 + p {margin-top: 10px;
}

选择紧跟在 h1 后面的第一个 p 元素。

• 一般兄弟选择器
  选择某元素后所有兄弟元素。

h1 ~ p {color: red;
}

选择 h1 后的所有兄弟 p 元素。

3. 属性选择器

• 存在属性选择器
  选择带有特定属性的元素。

input[type] {border: 1px solid #000;
}

选择带有 type 属性的所有 标签。

• 属性值选择器
  选择特定属性值的元素。

input[type="text"] {background-color: yellow;
}

选择 type 属性值为 text 的 标签。

4. 伪类选择器

• :hover
  当用户悬停在元素上时触发。

a:hover {color: orange;
}

当用户悬停在 a 标签上时，文字变为橙色。

• :nth-child()
  选择第几个子元素。

li:nth-child(2) {background-color: lightgray;
}

选择第 2 个 li 元素。

5. 伪元素选择器

• ::before
  在元素内容前插入内容。

p::before {content: "Note: ";color: red;
}

在每个 p 标签内容前加上 "Note: "。

• ::after
  在元素内容后插入内容。

p::after {content: "!";
}

在每个 p 标签内容后加上 “!”。