前端经典面试题合集, CSS 选择器有哪些?优先级分别是什么?

Step 1

Q:: 面试题: CSS选择器有哪些？优先级分别是什么？

A:: CSS选择器有多种类型，常见的有： 1. 元素选择器（例如：div``, p） 2. 类选择器（例如：.className） 3. ID选择器（例如：#idName） 4. 属性选择器（例如：[type='text']） 5. 伪类选择器（例如：:hover``, :first-child） 6. 伪元素选择器（例如：::before``, ::after） 7. 组合选择器（例如：div > p``, div p``, div + p）

CSS选择器的优先级规则如下： 1. ID选择器的优先级最高，优先级为100（例如：#id） 2. 类选择器和伪类选择器优先级次之，优先级为10（例如：.class``, :hover） 3. 元素选择器和伪元素选择器的优先级最低，优先级为1（例如：div``, ::before） 4. 通配符选择器（*）优先级最低，为0。

优先级的计算方法是将选择器中的ID、类、元素等的优先级相加，例如：#id.class div的优先级为100 + 10 + 1 = 111。

Step 2

Q:: 面试题: 如何解决CSS优先级冲突问题？

A:: 解决CSS优先级冲突问题的方法有： 1. 尽量避免过度依赖ID选择器，使用类选择器和元素选择器来组织样式。 2. 合理使用CSS层叠特性，后定义的样式会覆盖先前定义的同层级样式。 3. 使用!important声明强制应用某个样式（但应谨慎使用，因为会使代码难以维护）。 4. 通过提高选择器的权重来覆盖冲突样式，例如：增加特定的父级选择器。 5. 考虑重构HTML结构和CSS，避免不必要的嵌套和复杂选择器。