CSS——常见CSS选择器的写法

在CSS中，选择器是用来选择你想要样式化的元素的模式。下面是一些常见的CSS选择器写法：

1. 标签选择器：直接使用元素的标签名作为选择器。

p {
  color: blue;
}

2. 类选择器：使用.前缀来指定一个类选择器。

.my-class {
  background-color: yellow;
}

3. ID选择器：使用#前缀来指定一个ID选择器。

#my-id {
  font-size: 20px;
}

4. 群组选择器：使用,分隔不同的选择器，可以对多个不同的元素应用相同的样式。

h1, h2, h3 {
  color: green;
}

5. 后代选择器：使用空格 来指定一个后代选择器，选择特定父元素中的子元素。

div a {
  text-decoration: underline;
}

6. 子选择器：使用>来指定一个子选择器，选择直接子元素。

div > p {
  margin-bottom: 20px;
}

7. 相邻兄弟选择器：使用+来指定一个相邻兄弟选择器，选择紧随另一个元素的元素。

p + div {
  margin-top: 20px;
}

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

p ~ div {
  border-top: 1px solid black;
}

9. 属性选择器：使用[]来指定一个属性选择器，选择包含特定属性的元素。

input[type="text"] {
  border: 1px solid black;
}

10. 伪类选择器：使用:前缀来指定一个伪类选择器，用于选择特定状态的元素。

a:hover {
  color: purple;
}

11. 伪元素选择器：使用::前缀来指定一个伪元素选择器，用于选择元素的特定部分。

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

这些是CSS选择器的基础知识，每种选择器都有其特定的用途和场合。