【重识 HTML + CSS】CSS 选择器

在CSS中，选择器是一种模式，用于选择需要应用样式规则的元素。CSS选择器可以基于元素类型、属性、类或ID来选择元素。

1. 元素选择器：选择特定类型的HTML元素，例如p、h1、div等。

p {
  color: blue;
}

2. 类选择器：选择具有特定类的元素，类前面有一个点.。

.highlight {
  background-color: yellow;
}

3. ID选择器：选择具有特定ID的元素，ID前面有一个#。

#firstname {
  color: red;
}

4. 属性选择器：选择包含特定属性的元素，或者特定属性值的元素。

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

5. 伪类选择器：选择特定状态的元素，如:hover、:active、:visited等。

a:hover {
  color: hotpink;
}

6. 伪元素选择器：选择元素的某部分内容，如::before、::after等。

p::first-letter {
  font-size: 200%;
}

7. 组选择器：使用逗号,分隔，选择多个不同元素。

h1, h2, h3 {
  color: green;
}

8. 子选择器：使用>，选择直接子元素。

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

9. 后代选择器：使用空格，选择指定的后代元素。

div a {
  text-decoration: none;
}

10. 相邻兄弟选择器：使用+，选择紧跟在另一个元素后的元素。

p + h2 {
  font-weight: bold;
}

11. 通用兄弟选择器：使用~，选择同一父元素下的所有某元素之后的兄弟元素。

h2 ~ p {
  color: purple;
}

以上是CSS选择器的一些基础和常用类型。在实际开发中，可以根据需要选择合适的选择器来为HTML元素添加样式。