【CSS】认识CSS选择器及各选择器对应的用法

CSS选择器是用来选择你想要样式化的HTML元素的模式。下面是一些常用的CSS选择器以及它们的用法：

1. 元素选择器（Element Selector）: 选择特定的元素。

p {
  color: blue;
}

2. 类选择器（Class Selector）: 选择具有特定类的元素。

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

3. ID选择器（ID Selector）: 选择具有特定ID的元素。

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

4. 属性选择器（Attribute Selector）: 选择包含特定属性的元素。

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

5. 伪类选择器（Pseudo-class Selector）: 选择特定状态的元素。

a:hover {
  text-decoration: underline;
}

6. 伪元素选择器（Pseudo-element Selector）: 选择特定位置的内容。

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

7. 子代选择器（Child Selector）: 选择特定父元素的子元素。

div > p {
  color: red;
}

8. 相邻选择器（Adjacent Sibling Selector）: 选择紧接在另一个元素后的元素。

h1 + p {
  margin-top: 0;
}

9. 后代选择器（Descendant Selector）: 选择特定父元素的后代元素。

div p {
  color: green;
}

10. 通配选择器（Universal Selector）: 选择所有元素。

* {
  margin: 0;
  padding: 0;
}

11. 组选择器（Grouping Selector）: 将选择器组合在一起。

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

这些是CSS中的基本选择器。更复杂的选择器可以通过组合这些基本构造块创建。