CSS常见面试题及详细答案.docxVIP

CSS常见面试题及详细答案

1.请说说CSS选择器的优先级，以及常见的选择器类型

答案：优先级核心原则——specificity（specificity值越高，优先级越高；值相同则后写的覆盖先写的），优先级从高到低排序：

1.!important（强制提升优先级，慎用，会覆盖所有未加!important的规则，若双方都加，则仍按specificity比较）；

2.内联样式（style属性，specificity值1000）；

3.ID选择器（#id，specificity值100）；

4.类选择器（.class）、伪类选择器（:hover、:active等）、属性选择器（[type=text]），specificity值均为10；

5.元素选择器（div、p、span等）、伪元素选择器（::before、::after），specificity值均为1；

6.通配符（*）、继承的样式，优先级最低（specificity值0）。

补充：specificity计算只看选择器类型，与选择器数量无关（比如#box.contentpspecificity是100+10+1=111）；继承的样式无法覆盖元素自身设置的任何样式，哪怕是最低优先级的元素选择器。

2.什么是CSS盒模型？标准盒模型和怪异