前端面试题-CSS优先级

余学文发布于2019-08-30 14:09 / 1004人阅读

摘要：优先级是基于不同种类选择器组成的匹配规则。但是，在内部声明的选择器是会影响优先级。当两条相互冲突的带有规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。扩展阅读前端面试题选择器

一、选择器优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

二、优先级计算

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

三、优先级顺序 3.1 选择器权重值

3.2 从大到小

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器

3.2 注意

通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, " ") 和否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

四、特殊的 !important 规则 4.1 说明

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关，但 !important 却又与 CSS 优先级直接相关。

4.2 破坏级联规则

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

扩展阅读前端面试题-CSS选择器

专线服务超融合服务器面试题栈面试题笔试面试题面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115809.html

前端面试题-CSS优先级

摘要：优先级是基于不同种类选择器组成的匹配规则。但是，在内部声明的选择器是会影响优先级。当两条相互冲突的带有规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。扩展阅读前端面试题选择器一、选择器优先级浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。二、优先级计算优先级就是分配给指定的CSS声明...

zorro 2019-08-01 18:41 评论0 收藏0
前端面试题：CSS中的选择器权重

摘要：第二等代表选择器，如，权值为。第三等代表类，伪类和属性选择器，如，权值为。第五等通配符子选择器相邻选择器等的。第六等继承的样式没有权值。 CSS中选择器优先级的权重计算先看一段代码，如下： a{ color: red; } #box a{ color: green; } [class=box] a{ c...

cppprimer 2019-08-29 17:10 评论0 收藏0
前端 CSS 面试大纲

摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。背景参加完厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CS...

mating 2019-08-30 14:19 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

Scott 2019-08-30 14:08 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

XGBCCC 2019-08-01 18:42 评论0 收藏0