HTML 选择器主要用于 CSS 和 JavaScript 中定位和操作 HTML 元素。以下是常见选择器的分类和用法说明：
1. 元素选择器
通过标签名匹配元素：
css
p { color: blue; } / 所有元素 /
2. 类选择器 (Class)
通过 `class` 属性匹配元素：
css
warning { background: yellow; } / class="warning" 的元素 /
3. ID 选择器
通过 `id` 属性匹配唯一元素：
css
header { font-size: 24px; } / id="header" 的元素 /
4. 通配符选择器
匹配所有元素（慎用）：
css
{ margin: 0; } / 所有元素 /
1. 后代选择器
匹配嵌套在父元素内的子元素：
css
div span { color: red; } / div 内所有层级的 /
2. 子元素选择器 (`>`)
仅匹配直接子元素：
css
ul > li { list-style: none; } / ul 的直接子级3. 相邻兄弟选择器 (`+`)
匹配紧接在某个元素后的兄弟元素：
css
h2 + p { margin-top: 10px; } / 紧跟在/
4. 通用兄弟选择器 (`~`)
匹配同一父元素下所有后续兄弟元素：
css
h2 ~ p { color: gray; } /兄弟元素 /
通过属性名或属性值匹配元素：
css
[disabled] { opacity: 0.5; } / 所有带 disabled 属性的元素 /
a[target="_blank"] { / 匹配 target="_blank" 的链接 /
border: 1px solid;
input[type="text"] { / 匹配 type="text" 的输入框 /
width: 200px;
匹配元素的特定状态或位置：
css
a:hover { color: purple; } / 鼠标悬停时的链接 /
li:nth-child(2n) { / 偶数行列表项 /
background: f0f0f0;
input:focus { / 输入框获得焦点时 /
border-color: blue;
not(.hidden) { / 排除 class="hidden" 的元素 /
display: block;
匹配元素的特定部分（如首行、占位符）：
css
p::first-line { / 段落首行文字 /
font-weight: bold;
placeholder { / 输入框占位符文本 /
color: 999;
选择器优先级从高到低（权重计算）：
1. `!important`（强制覆盖）
2. 内联样式（如 `style="..."`）
3. ID 选择器（权重 100）
4. 类/属性/伪类选择器（权重 10）
5. 元素/伪元素选择器（权重 1）
html
1. 避免过度使用 ID 选择器（难以复用）。
2. 优先用类选择器定义可复用的样式。
3. 复杂选择器可能影响性能，尽量保持简洁。
掌握这些选择器可以精准控制页面元素的样式和行为，提升开发效率！
版权声明： 知妳网保留所有权利，部分内容为网络收集，如有侵权，请联系QQ793061840删除，添加请注明来意。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
