企业官网建设流程全解析

1. 常用选择器分类

CSS 选择器用于「精准选中页面元素」，是样式生效的前提，分为基础选择器、组合选择器、属性选择器、伪类选择器四大类。

（1）基础选择器

• 通配符 *：选中所有元素，用于全局重置样式

• 标签选择器：div、p、span，批量选中同类标签

• 类选择器 .class：最常用，可复用、可多类名叠加

• ID 选择器 #id：唯一标识，不推荐滥用，权重极高

（2）组合选择器

• 后代选择器 空格：父级 所有下级（不限层级）

• 子代选择器 >：仅直接子元素，不包含孙子层级

• 相邻兄弟 +：匹配紧邻的下一个兄弟元素

• 通用兄弟 ~：匹配后续所有同级兄弟元素

• 交集选择器：标签.类名，精准限定范围

• 并集选择器 ,：多元素共用一套样式

（3）属性选择器

• [attr]：拥有该属性的元素

• [attr="val"]：属性完全等于指定值

• [attr^="val"]：属性以 val 开头

• [attr$="val"]：属性以 val 结尾

• [attr*="val"]：属性包含 val

2. 选择器优先级与权重计算（面试核心）

（1）权重等级（从低到高）

!important > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 标签选择器 > 通配符 > 继承样式

（2）权重数值规则

• 行内样式：1000

• ID 选择器：0100

• 类 / 伪类 / 属性：0010

• 标签 / 伪元素：0001

• 通配符、继承：0000

（3）计算规则

权重不进位，10个类选择器权重 < 1个ID选择器；权重相同，后写覆盖先写。

（4）!important 规则

优先级最高，破坏层级、难以维护，禁止滥用，仅用于紧急覆盖第三方样式。

3. 实战使用技巧

• 优先使用类选择器，权重可控、便于维护

• 少用 ID 写样式，ID 留给 JS 获取元素

• 深层嵌套尽量用子代选择器，避免全局污染

• 巧用属性选择器统一处理表单、链接样式