JavaScript教程：深入理解CSS选择器
项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info 前言
在现代Web开发中，CSS选择器是前端工程师必须掌握的核心技能之一。无论你是直接使用CSS样式表，还是通过JavaScript操作DOM元素，熟练运用各种CSS选择器都能极大提高开发效率。本文将系统介绍CSS选择器的各种类型和使用场景。
基础选择器类型
CSS选择器的基础类型包括：
- 通用选择器
*- 匹配所有元素 - 元素选择器
div- 匹配指定标签的元素 - ID选择器
#id- 匹配具有特定ID的元素 - 类选择器
.class- 匹配具有特定类的元素 - 属性选择器
[name="value"]- 根据元素属性匹配 - 伪类选择器
:visited- 根据元素状态匹配
这些基础选择器可以组合使用，形成更精确的选择条件。例如：
/* 同时具有c1和c2类的元素 */
.c1.c2
/* 具有特定ID和类，且处于visited状态的a元素 */
a#id.c1.c2:visited
元素关系选择器
CSS提供了四种元素关系选择器：
- 后代选择器
div p- 选择div内部所有p元素（不限层级） - 子元素选择器
div > p- 仅选择div的直接子元素p - 一般兄弟选择器
div ~ p- 选择div之后所有同级p元素 - 相邻兄弟选择器
div + p- 选择紧接在div后的第一个同级p元素
实际应用示例
考虑以下HTML结构：
<h3>斯拉夫语族</h3>
<ol id="languages">
<!-- 嵌套的语言列表 -->
</ol>
对应的CSS选择器应用：
/* 所有后代li元素 */
#languages li { color: brown; }
/* 直接子元素li */
#languages > li { color: black; }
/* 特定元素后的兄弟li */
#e-slavic ~ li { color: red; }
/* 相邻兄弟li */
#latvian + li { color: green; }
位置伪类选择器
CSS提供了一系列基于元素位置的伪类选择器：
:first-child- 父元素的第一个子元素:last-child- 父元素的最后一个子元素:only-child- 父元素的唯一子元素:nth-child(n)- 父元素的第n个子元素:nth-last-child(n)- 从末尾计数的第n个子元素
其中:nth-child()支持公式计算，如：
2n- 偶数位置元素2n+1- 奇数位置元素3n+2- 第2、5、8...个元素
同类元素位置选择器
当需要只考虑同类元素的位置时，可以使用：
:first-of-type:last-of-type:only-of-type:nth-of-type:nth-last-of-type
这些选择器会忽略其他类型的元素，只计算相同标签的元素位置。
属性选择器详解
CSS提供了丰富的属性选择方式：
- 存在检查：
[attr]- 具有指定属性的元素 - 精确匹配：
[attr="val"]- 属性等于特定值的元素 - 开头匹配：
[attr^="val"]- 属性以特定值开头的元素 - 连字符匹配：
[attr|="val"]- 属性等于或以特定值加连字符开头的元素 - 包含检查：
[attr*="val"]- 属性包含特定子字符串的元素 - 单词匹配：
[attr~="val"]- 属性包含特定单词的元素（空格分隔） - 结尾匹配：
[attr$="val"]- 属性以特定值结尾的元素
其他实用伪类
:not(selector)- 不符合指定选择器的元素:focus- 获得焦点的元素:hover- 鼠标悬停的元素:empty- 没有子元素的元素:checked/:disabled/:enabled- 表单元素状态:target- 与URL锚点匹配的ID元素
伪元素应用
伪元素::before和::after允许在元素内容前后插入生成内容：
li::before {
content: " [[ ";
}
li::after {
content: " ]] ";
}
注意：为了兼容IE8，可以使用单冒号写法:before和:after。
总结
掌握CSS选择器是高效Web开发的基础。通过合理组合各种选择器，可以精确地定位和样式化页面元素。建议读者通过实际练习来巩固这些知识，逐步提升选择器使用的熟练度。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
