CSS常见选择器

CSS（层叠样式表）选择器是一种模式，用于选择要添加样式的 HTML 元素。以下是一些常见的CSS选择器：

1. 通用选择器

• *：选择所有元素。

* {
  margin: 0;
  padding: 0;
}

2. 元素（类型）选择器

• elementname：选择所有指定的HTML元素。

p {
  color: blue;
}

3. ID选择器

• #id：选择具有指定id的元素。每个页面上的ID应该是唯一的。

#header {
  background-color: grey;
}

4. 类选择器

• .classname：选择具有指定类的元素。一个元素可以有多个类，一个类也可以用于多个元素。

.container {
  width: 100%;
}

5. 属性选择器

• [attribute]：选择具有指定属性的元素。

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

6. 后代选择器

• A B：选择A元素内部的所有B元素。

div p {
  color: red;
}

7. 子选择器

A > B：选择A元素直接子元素的B元素。

ul > li {
  list-style-type: none;
}

8. 相邻兄弟选择器

• A + B：选择紧接在A元素之后的第一个B元素。

h1 + p {
  font-weight: bold;
}

9. 通用兄弟选择器

A ~ B：选择A元素之后的所有B元素。

h1 ~ p {
  color: green;
}

10. 伪类选择器

• :pseudo-class：选择处于特定状态的元素，如:hover。

a:hover {
  color: red;
}

11. 伪元素选择器

• ::pseudo-element：选择元素的特定部分，如::first-line。

p::first-line {
  font-weight: bold;
  color: blue;
}

12. 分组选择器

• A, B：同时选择所有A元素和所有B元素。

h1, h2, h3 {
  color: purple;
}

这些选择器可以单独使用，也可以组合使用来实现更具体的选择，从而为网页添加丰富多样的样式。