CSS常用选择器

CSS选择器用于选择HTML元素并为其应用样式。以下是CSS中最常用的选择器类型：

基本选择器

1.元素选择器 - 通过HTML标签名选择元素

p { color: blue; }

2.类选择器 - 通过class属性选择元素（以.开头）

.warning { color: red; }

3.ID选择器 - 通过id属性选择元素（以#开头）

#header { background: gray; }

4.通用选择器 - 选择所有元素（*）

* { margin: 0; padding: 0; }

组合选择器

5.后代选择器 - 选择某个元素内的所有特定后代（空格分隔）

div p { font-size: 14px; }

6.子元素选择器 - 选择直接子元素（>分隔）

ul > li { list-style: none; }

7.相邻兄弟选择器 - 选择紧接在另一个元素后的元素（+分隔）

h1 + p { margin-top: 0; }

8.通用兄弟选择器 - 选择所有在指定元素之后的同级元素（~分隔）

h2 ~ p { color: green; }

属性选择器

9.属性存在选择器 - 选择具有特定属性的元素

[disabled] { opacity: 0.5; }

10.属性值选择器 - 选择属性等于特定值的元素

[type="text"] { border: 1px solid #ccc; }

11.属性值包含选择器 - 选择属性值包含特定字符串的元素

[class*="btn"] { padding: 5px 10px; }

12.属性值开头选择器 - 选择属性值以特定字符串开头的元素

[href^="https"] { color: green; }

13.属性值结尾选择器 - 选择属性值以特定字符串结尾的元素

[src$=".png"] { border: 1px solid #eee; }

伪类选择器

14.动态伪类

a:link { color: blue; }        /* 未访问链接 */
a:visited { color: purple; }   /* 已访问链接 */
a:hover { text-decoration: underline; }  /* 鼠标悬停 */
a:active { color: red; }       /* 激活/点击时 */

15.结构伪类

li:first-child { font-weight: bold; }  /* 第一个子元素 */
li:last-child { border-bottom: none; } /* 最后一个子元素 */
li:nth-child(2n) { background: #f5f5f5; }  /* 偶数子元素 */

16.表单伪类

input:focus { outline: 2px solid blue; }
input:disabled { background: #eee; }
input:checked + label { font-weight: bold; }

伪元素选择器

17.伪元素

p::first-line { font-weight: bold; }  /* 第一行 */
p::first-letter { font-size: 2em; }   /* 首字母 */
::before { content: "→"; }            /* 在元素前插入内容 */
::after { content: "!"; }             /* 在元素后插入内容 */

选择器组合

18.多重选择器 - 同时选择多个元素（逗号分隔）

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

19.复合选择器 - 组合不同类型的选择器

button.primary { background: blue; }  /* 类为primary的button元素 */

这些选择器可以灵活组合使用，以满足各种样式需求。