CSS有哪些常用的选择器？
参考资料
元素选择器
简介：通过HTML元素名称选择元素
语法：
element示例：
p { color: red; }功能：选择所有指定类型的HTML元素
类选择器
简介：通过class属性选择元素
语法：
.classname示例：
.highlight { background: yellow; }功能：选择具有指定class属性的所有元素
ID选择器
简介：通过id属性选择元素
语法：
#idname示例：
#header { font-size: 24px; }功能：选择具有指定id属性的唯一元素
通配符选择器
简介：选择所有元素
语法：
*示例：
* { margin: 0; }功能：匹配文档中的所有元素
属性选择器
[attribute][attribute=value][attribute~=value][attribute|=value][attribute^=value][attribute$=value][attribute*=value]简介：通过属性选择元素
语法：
示例：
a[target="_blank"] { color: blue; }功能：根据属性及其值选择元素
后代选择器
简介：选择嵌套在另一个元素内的元素
语法：
ancestor descendant示例：
div p { line-height: 1.5; }功能：选择指定祖先元素内的所有后代元素
子元素选择器
简介：选择直接子元素
语法：
parent > child示例：
ul > li { list-style: none; }功能：只选择作为直接子元素的元素
相邻兄弟选择器
简介：选择紧接在另一个元素后的元素
语法：
element + sibling示例：
h1 + p { margin-top: 0; }功能：选择紧接在指定元素后的第一个兄弟元素
通用兄弟选择器
简介：选择所有在另一个元素后的兄弟元素
语法：
element ~ sibling示例：
h1 ~ p { color: gray; }功能：选择指定元素后的所有兄弟元素
伪类选择器
:hover:active:focus:visited:first-child:last-child:nth-child()简介：选择元素的特定状态
语法：
:pseudo-class常见伪类：
示例：
a:hover { text-decoration: underline; }功能：根据元素状态选择元素
伪元素选择器
::before::after::first-letter::first-line::selection简介：选择元素的特定部分
语法：
::pseudo-element常见伪元素：
示例：
p::first-letter { font-size: 200%; }功能：选择元素的特定部分进行样式化
组合选择器
简介：组合多个选择器
语法：
selector1, selector2示例：
h1, h2, h3 { font-family: Arial; }功能：同时选择多个元素应用相同样式
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
本文来自《西里网 . html 网页设计》 -- 发布时间：2025-03-29
本页链接：https://html.ciilii.com/show/news-1219.html
原创声明：本篇文章均为西里网原创，由《DeepSeek-R1 模型》自动生成。内容真实性仅供参考学习。
本作品采用 知识共享署名—非商业性使用—相同方式共享 4.0 国际许可协议 (CC BY-NC-SA 4.0) 进行许可。