CSS选择符

CSS 选择符用于精准定位 HTML 元素并应用样式，不同选择符适用于不同场景。以下是常用的 CSS 选择符分类及用法：

一、基础选择符（最常用）

1. 元素选择符
   直接匹配 HTML 标签名，应用于所有该类型元素。

   p { color: gray; } /* 所有 <p> 标签文字变灰 */
   img { max-width: 100%; } /* 所有图片自适应宽度 */
   

2. 类选择符（.class）
   匹配带有指定 class 属性的元素，可复用在多个元素上。

   .btn { padding: 8px 16px; } /* 所有 class="btn" 的元素添加内边距 */
   .warning { background: #fff3cd; } /* 所有 class="warning" 的元素添加黄色背景 */
   

   HTML 中使用：<button class="btn warning">按钮</button>

3. ID 选择符（#id）
   匹配带有指定 id 属性的唯一元素（页面中 id 需唯一）。

   #header { height: 60px; } /* 仅 id="header" 的元素生效 */
   

   HTML 中使用：<div id="header"></div>

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

1. 后代选择符（空格分隔）
   匹配某元素内部的所有后代元素（包括子元素、孙元素等）。

   .article p { font-size: 14px; } /* .article 内所有 <p> 标签文字大小为14px */
   

2. 子选择符（>）
   仅匹配某元素的直接子元素（不包含孙元素）。

   .list > li { border-bottom: 1px solid #eee; } /* 仅 .list 的直接子元素 <li> 添加下划线 */
   

3. 相邻兄弟选择符（+）
   匹配某元素紧接其后的第一个同级元素。

   h2 + p { margin-top: 10px; } /* 紧跟 <h2> 后的第一个 <p> 添加上边距 */
   

4. 通用兄弟选择符（~）
   匹配某元素之后所有同级的指定元素。

   .active ~ li { opacity: 0.6; } /* .active 之后所有 <li> 透明度降低 */
   

三、伪类选择符（元素的特定状态 / 位置）

1. 状态伪类
   匹配元素的动态状态（如点击、 hover 等）。

   a:hover { color: red; } /* 鼠标悬停时链接变红 */
   input:focus { border: 2px solid blue; } /* 输入框聚焦时边框变蓝 */
   button:active { transform: scale(0.98); } /* 按钮点击时轻微缩小 */
   

2. 结构伪类
   根据元素在 DOM 中的位置选择（如第 n 个元素）。

   li:first-child { font-weight: bold; } /* 第一个 <li> 加粗 */
   li:last-child { margin-bottom: 0; } /* 最后一个 <li> 取消下边距 */
   li:nth-child(2) { color: green; } /* 第二个 <li> 变绿 */
   li:nth-child(odd) { background: #f5f5f5; } /* 奇数行 <li> 灰色背景 */
   

3. 否定伪类（:not ()）
   排除符合条件的元素。

   input:not([disabled]) { cursor: pointer; } /* 非禁用状态的输入框可点击 */
   

四、属性选择符（根据元素属性选择）

匹配带有指定属性或属性值的元素。

/* 1. 带有指定属性 */
[disabled] { opacity: 0.5; } /* 所有带 disabled 属性的元素半透明 */

/* 2. 属性值完全匹配 */
input[type="text"] { width: 200px; } /* 仅 type="text" 的输入框生效 */

/* 3. 属性值包含指定词（空格分隔） */
[class~="btn"] { border-radius: 4px; } /* class 中包含 "btn" 词的元素 */

/* 4. 属性值以指定前缀开头 */
a[href^="https"] { color: #0066cc; } /* href 以 https 开头的链接变蓝 */

/* 5. 属性值以指定后缀结尾 */
img[src$=".png"] { border: 1px solid #ccc; } /* 后缀为 .png 的图片加边框 */

五、伪元素选择符（元素的虚拟部分）

创建元素的虚拟子元素（如文本前后、首字母等），需配合 content 使用。

/* 1. 元素内容前添加虚拟内容 */
h1::before { content: "★"; margin-right: 8px; } /* <h1> 前加星星符号 */

/* 2. 元素内容后添加虚拟内容 */
.link::after { content: "→"; font-size: 12px; } /* 链接后加箭头 */

/* 3. 选中元素的首字母 */
p::first-letter { font-size: 20px; float: left; } /* 段落首字母放大 */

/* 4. 选中元素的第一行文本 */
p::first-line { color: #333; } /* 段落第一行文字加深 */

总结：选择符优先级

当多个选择符同时作用于同一元素时，优先级规则为：
!important > 内联样式 > ID 选择符 > 类 / 伪类 / 属性选择符 > 元素选择符 > 通配符（*）

例如：#header .title 优先级高于 .title 和 div .title。

合理组合不同选择符，可精准控制样式范围，避免样式冲突。