【CSS】CSS选择器全解指南【CSS基础知识详解】

CSS 选择器是用来指定样式规则应用于哪些元素的模式。CSS选择器有多种类型，包括基础的元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器等。

1. 元素选择器：选择特定的HTML标签元素。

p { color: blue; }

2. 类选择器：选择具有特定类的HTML元素。

.my-class { color: red; }

3. ID选择器：选择具有特定ID的HTML元素。

#my-id { color: green; }

4. 属性选择器：选择包含特定属性的HTML元素。

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

5. 伪类选择器：选择特定状态的HTML元素。

a:hover { color: purple; }

6. 伪元素选择器：选择HTML元素的特定部分。

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

7. 组合选择器：结合多个选择器以选择更具体的元素。

div.container > p { border: 1px solid black; }

8. 通配选择器：选择所有元素。

* { margin: 0; padding: 0; }

9. 子选择器：选择直接子元素。

div > p { color: orange; }

10. 相邻选择器：选择紧跟在另一个元素后的元素。

h1 + p { margin-top: 0; }

11. 后代选择器：选择特定元素内的后代元素。

div p { text-indent: 2em; }

12. 分组选择器：同时选择多个元素。

h1, h2, h3 { font-family: 'Arial Black'; }

13. 伪元素选择器：选择元素的特定部分。

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

14. 否定选择器：选择不满足条件的元素。

:not(p) { color: grey; }

15. 伪类选择器（伪类选择器与之前的伪类选择器略有不同，主要用于链接）：

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

CSS选择器是CSS的核心部分，它决定了样式规则应用于哪些元素。了解和使用这些选择器是每个前端开发者必备的技能。