前端面试题——11.CSS样式的优先级？

本文链接： https://blog.csdn.net/qq_40686529/article/details/102551102

分祖先样式和自身样式
如果既有祖先样式又有自身样式，前江后浪拍前浪，一代更比一代强，自身赢。
栗子：

<head>
<style>
.father{
    color: red
}
</style>
</head>
<body>
<div class="father">
 <div style="color:blue">颜色</div>
</div>
</body>

蚊子颜色为蓝色。

————————————————华丽的分割线—————————————————————
自身样式比较繁杂，需要根据CSS的7种选择器优先级确定

ID选择器：例如 #id{}
类选择器: 例如 .class{}
属性选择器: 例如 a[href]{color:red},那么链接会是红色
伪类选择器，例如，:hover{}
伪元素选择器：例如，p::first-letter{color:red},那么p标签内第一个字颜色是红色
标签选择器：例如,span{}
通配选择器：例如，*{}

优先级：内联样式 > ID选择器 > class选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。

——————————————————又一道华丽的分隔线————————————————
css优先规则：计算选择符中ID选择器的个数（a），类选择器的个数+属性选择器的个数+伪类选择器的个数（b）,伪元素选择器的个数+标签选择器的个数（c），依次比较a,b,c，若a大，则不需要比较b,c，依次类推，若a,b,c都相等，则“就近原则”。
栗子：

    #id .class {color: yellow;}  // ①
    div .class {color: red;}    // ②

因为①中id>②中年id数量，所以此栗子中的文字是yellow

———————————————————华丽再现—————————————————————

css样式里的boss，!important

    #id .class {color: yellow;}  // ①
    div .class {color: red !important;}    // ②

这个栗子里蚊子颜色是红色.

参考：https://www.runoob.com/w3cnote/css-style-priority.html

前端面试题——11.CSS样式的优先级？

猜你喜欢