CSS中所有选择器详解

CSS 中的选择器是用来指定样式规则应用于哪些元素的。以下是一些常用的选择器类型：

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

.my-class {
  color: red;
}

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

#my-id {
  color: blue;
}

3. 元素选择器（Type 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）: 用于选择指定父元素的直接子元素。

ul > li {
  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;
}

11. 组选择器（Grouping Selector）: 将多个选择器合并为一组，可以同时选择多个元素。

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

12. 伪元素选择器（::before 和 ::after）: 用于向元素的内容前后添加内容或者形状。

p::before {
  content: "["
}
 
p::after {
  content: "]";
}

13. 伪元素选择器（::selection）: 用于更改用户选中文本的样式。

::selection {
  background: blue;
  color: white;
}

14. 否定伪类选择器（:not()）: 用于选择不匹配内部选择器的元素。

input:not([type="submit"]) {
  border: 1px solid black;
}

15. 结构伪类选择器（:nth-child, :nth-of-type）: 用于选择特定位置的子元素。

p:nth-child(2) {
  color: orange;
}

16. 只读状态选择器（:read-only, :read-write）: 用于选择只读或可写的表单元素。

input:read-only {
  background-color: lightgray;
}

17. 输入伪类选择器（:enabled, :disabled, :checked, :default）: 用于选择可用、禁用的表