本文共 816 字，大约阅读时间需要 2 分钟。

常用的选择器有如下几种

1 标签选择器

标签选择器的特点是选择范围广，适用于层级选择，可以减少命名冲突。

示例：

*{ margin:0;padding:0 }div{ color:red }

注意事项：适用于整体样式设置，建议与其他选择器结合使用。

2 id选择器

id选择器通过元素的唯一id属性进行定位，适用于单一元素操作。

注意事项：id名称一般用于程序管理，不宜用于层级选择。

#box{ color:red }

注意：id选择器不支持复用，且不适用于多个元素。

3 类选择器

类选择器通过类名进行定位，支持多元素复用，适合多样式场景。

特点：灵活性强，可同时应用多个样式。

.red{ color:red }.big{ font-size:20px }

示例：

适用于多个元素共享样式的场景。

4 层级选择器

层级选择器结合标签和类名，用于定位父子层级关系中的特定元素。

示例：

.box span{ color:red }.box .red{ color:pink }

注意：空格表示直接子元素，后面可跟多个层级选择。

5 组选择器

组选择器用于对多个元素同时应用相同或不同的样式。

特点：可以通过逗号分隔多个选择器。

.box1,.box2,.box3{ width:100px;height:100px }

示例：

6 伪类及伪元素选择器

伪类用于添加额外的样式条件，常用于交互设计如悬停效果。

伪元素用于在元素内部或外部插入内容。

:hover{ color:red }::before{ content:'行首文字' }

示例：

7 * 选择器

通用选择器*表示选择页面中所有元素，适用于全局样式。

特点：可用于定位页面内所有元素，支持层级选择。

div *{ background-color:yellow }

注意：结合其他选择器可精确定位特定元素。

转载地址：http://rdjcz.baihongyu.com/