前端 CSS 面试题, 如何计算 CSS 的优先级?
前端 CSS 面试题, 如何计算 CSS 的优先级?
QA
Step 1
Q:: 如何计算 CSS 的优先级？
A:: CSS 的优先级决定了当多个选择器作用于同一元素时，哪个样式会被应用。优先级的计算规则如下：
1. 内联样式（如 style 属性）具有最高优先级，其优先级为 1000。
2. ID 选择器的优先级为 100。
3. 类选择器、伪类选择器（如 :hover）、属性选择器的优先级为 10。
4. 元素选择器和伪元素选择器（如 ::before）的优先级为 1。
5. 通配符选择器（*）和组合符（+、>、~）没有优先级。
此外，使用 !important 标记的规则会覆盖所有其他规则的优先级，但仅当多个规则都使用 !important 时，才会重新计算它们之间的优先级。
Step 2
Q:: CSS 优先级的常见问题有哪些？
A:: 常见问题包括：
1. 忘记 ID 选择器优先级高于类选择器。
2. !important 的滥用导致样式难以维护。
3. 不理解优先级叠加规则，特别是在嵌套选择器中。
4. 未注意到内联样式优先级最高，这可能导致外部样式表的样式失效。
Step 3
Q:: 如何解决 CSS 优先级冲突？
A:: 解决 CSS 优先级冲突的常见方法包括：
1. 调整选择器的具体性，使用更高优先级的选择器覆盖低优先级的样式。
2. 避免使用 !important，除非在特殊情况下，比如需要覆盖第三方库的样式。
3. 结构化你的 CSS 规则，尽量使用类选择器而不是 ID 选择器，以便于复用和维护。
4. 使用工具如 CSS 预处理器（Sass, LESS）来组织和嵌套样式，确保选择器的层级和优先级清晰。
Step 4
Q:: 为什么要避免过多使用 !important？
A:: !important 会使样式优先级变得过高，覆盖所有其他规则。这在小规模应用时可能没有问题，但在大型项目中会导致样式难以管理，影响代码的可维护性。此外，它还可能导致其他开发者难以覆盖某些样式，导致样式的意外行为。