CSS基础之CSS选择器，前端编程开发

CSS选择器是用来指定CSS样式的“指南”，它决定了样式规则应用于哪些元素。以下是一些常用的CSS选择器：

1. 类选择器（Class Selector）: 用于选择具有指定类的元素。

.my-class {
  color: red;
}

2. ID选择器（ID Selector）: 用于选择具有指定ID的单个元素。

#my-id {
  color: blue;
}

3. 元素选择器（Element Selector）: 用于选择指定类型的元素。

p {
  font-size: 16px;
}

4. 属性选择器（Attribute Selector）: 用于选择包含特定属性的元素，无论其值如何。

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

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: green;
}

8. 相邻选择器（Adjacent Sibling Selector）: 用于选择紧跟在另一个元素后的元素，且两者有相同父元素。

h1 + p {
  margin-top: 0;
}

9. 后代选择器（Descendant Selector）: 用于选择指定父元素的后代（不仅限于直接子元素）。

div p {
  color: purple;
}

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

* {
  margin: 0;
  padding: 0;
}

选择器的复杂程度可以导致无限的可能性，这里只列出了一些基本和常用的选择器。在实际开发中，可以根据需要灵活运用各种选择器，以便精确控制页面中元素的样式。