CSS中所有选择器

一、基础选择器

1. 元素选择器
   匹配指定 HTML 标签。

p { color: blue; } /* 所有 <p> 标签文字变蓝 */

2. 类选择器（.）
   匹配带指定 class 属性的元素。

.active { background: yellow; } /* 所有 class="active" 的元素背景变黄 */

3. ID 选择器（#）
   匹配带指定 id 属性的唯一元素（id 需唯一）。

#header { height: 80px; } /* id="header" 的元素高度设为 80px */

5. 通配符选择器（*）
   匹配所有元素。

* { margin: 0; padding: 0; } /* 清除所有元素默认边距和内边距 */

6. 属性选择器（[属性]）
   匹配带指定属性或属性值的元素。

[type="password"] { border: 1px solid red; } /* 所有 type="password" 的输入框边框变红 */
[href] { text-decoration: none; } /* 所有带 href 属性的元素（如链接）去除下划线 */

二、组合选择器（关联多个元素）

1. 后代选择器（空格）
   匹配祖先元素内的所有后代元素（无论嵌套层级）。

.nav a { color: green; } /* .nav 类元素内的所有 <a> 标签文字变绿 */

2. 子元素选择器（>）
   仅匹配父元素的直接子元素（一级嵌套）。

ul > li { list-style: none; } /* <ul> 直接包含的 <li> 去除列表样式（不影响嵌套的子 <li>） */

3. 相邻兄弟选择器（+）
   匹配指定元素后的紧邻兄弟元素（同层级，紧挨着）。

h2 + p { font-weight: bold; } /* <h2> 后面紧跟的第一个 <p> 文字加粗 */

4. 通用兄弟选择器（~）
   匹配指定元素后的所有同级兄弟元素（同层级，不必紧邻）。

.title ~ .content { margin-top: 10px; } /* .title 后面所有同级的 .content 元素顶部间距 10px */

三、伪类选择器（:）

匹配元素的状态、位置或特殊条件。

1.状态伪类

• :hover：鼠标悬浮时

a:hover { color: red; }（鼠标移到链接上变红）

• :focus：元素获取焦点时

input:focus { outline: 2px solid blue; }（输入框获焦时显示蓝色轮廓）

• :visited：链接已访问过

a:visited { color: gray; }（已访问链接变灰）

2.结构伪类

• :first-child：父元素的第一个子元素

ul li:first-child { color: orange; }（列表中第一个 <li> 文字变橙）

• :nth-child(2)：父元素的第 2 个子元素（支持公式，如 nth-child(2n) 匹配偶数位）

table tr:nth-child(odd) { background: #f5f5f5; }（表格奇数行背景变灰）

• :only-child：父元素中唯一的子元素

div:only-child { border: 1px solid #ccc; }（父元素中唯一的 <div> 加边框）

3.否定伪类（:not ()）
排除指定元素。

p:not(.special) { font-size: 14px; } /* 所有不含 .special 类的 <p> 文字大小 14px */

四、伪元素选择器（::）

创建虚拟元素（不在 DOM 中，用于样式装饰）。

1.::before：在元素内容前插入虚拟内容示例：

.tips::before { content: "提示："; color: #666; } /* .tips 元素前添加"提示："文字 */

2.::after：在元素内容后插入虚拟内容示例：

.clearfix::after { content: ""; display: block; clear: both; } /* 清除浮动的经典用法 */

3.::first-letter：匹配文本首字母示例：

p::first-letter { font-size: 2em; } /* <p> 标签首字母放大 2 倍 */

4.::selection：匹配选中的文本示例：

::selection { background: pink; color: white; } /* 选中文本背景变粉，文字变白 */

五、分组选择器（,）

同时匹配多个选择器，统一设置样式。

h1, h2, h3 { margin: 20px 0; color: #333; } /* h1、h2、h3 统一设置边距和颜色 */

这些选择器可以组合使用（如 .box > p:first-child:hover），灵活定位元素。需要进一步了解优先级计算或复杂场景用法可以告诉我哦！