当前位置: 首页 > Web前端 > HTML

前端面试题-CSS优先级

时间:2023-04-02 15:21:58 HTML

1.选择器优先级浏览器使用优先级来判断哪些属性值与元素最相关,然后将这些属性值应用到元素上。优先级基于由不同种类的选择器组成的匹配规则。2.优先级计算优先级是分配给指定CSS语句的权重,由匹配的选择器中每个选择器类型的值决定。当优先级等于多个CSS声明中任何一个的优先级时,CSS中的最后一个声明将应用于该元素。仅当同一元素有多个声明时,优先级才重要。因为每个直接作用于元素的CSS规则总是会接管/覆盖(takeover)该元素从祖先元素继承的规则。3.优先级顺序3.1选择器权重值3.2内联样式>ID选择器>类选择器=属性选择器=伪类选择器>元素(类型)选择器=伪元素选择器3.2注意传递通用选择器(*),组合器(+,>,~、'')和否定伪类(:not())对优先级没有影响。(但是,在:not()内声明的选择器确实会影响优先级)。4.特殊!important规则4.1说明当!important规则用于样式声明时,该声明将覆盖任何其他声明。虽然技术上!important与优先级无关,但!important与CSS优先级直接相关。4.2破坏级联规则使用!important是一个坏习惯,应尽量避免,因为它破坏了样式表中固有的级联规则,使调试和查找错误变得更加困难。当两个具有!important规则的冲突声明应用于同一元素时,将使用具有更高优先级的声明。延伸阅读前端面试题——CSS选择器