前端学习系列——（八）CSS样式优先级

最新推荐文章于 2024-08-11 23:43:12 发布

随风丶逆风

最新推荐文章于 2024-08-11 23:43:12 发布

阅读量1w

点赞数 7

分类专栏：前端学习系列 CSS 文章标签： css 样式优先级权重 css样式规则

本文链接：https://blog.csdn.net/sinat_36521655/article/details/80140221

版权

CSS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端学习系列

14 篇文章 2 订阅

订阅专栏

不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。

其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，就可以避免写出无法复用的样式，同时可以快速定位样式冲突无法应用的问题的根源。

一、样式优先级规则：

1.根据权重值排序，应用权重值第一的样式

2.如果权重值相同，则应用靠后定义的样式，且遵循“元素上的style” > “文件头上的style元素” >“外部样式文件”的规则（应避免这种情况，若出现问题，溯源的时候比较麻烦）

二、权重规则：

权重分为四个等级（有一个重要级角色不在此列）

第一等：内联样式，权重1000，即标签内的style属性设置的样式

第二等：ID选择器，权重100，例如#id{...}

第三等：类选择器，伪类选择器，属性选择器，权重10，例如.class{...}、:hover{...}、[arrtibute=value]

第四等：标签选择器，伪元素选择器，权重1，例如div{...}、::after{...}

超然地位：!important（只要我出现，不好意思，权重就是无限，优先考虑，别的靠边站）

PS:还有几个权重为0，不计入排名，他们就是通配选择器(*)，子选择器(>)，相邻同胞选择器(+)

根据样式根据以上规则，按照选择器累加计算权重，例如

#my-id .my-class div p{...}

对于p标签的来说，这个样式的权重就是100+10+1+1=112，如果p还有别的样式，只要小于(严格小于)112，就使用这个样式，别的样式无效。

三、举个栗子（规则一：权重不同）

猜猜下面这组样式设计，最后<p>标签的文字颜色是什么吗？

CSS样式如下:

.my-class div div p{
    color:green;
}

.my-class #my-id div p{
    color:red;
}

div #my-id div p{
    color:gray;
}

div p{
    color:blue;
}

p{
    color:yellow;
}

HTML结构如下:

<body>
<div class="my-class">
    <div id="my-id">
        <div>
            <p>猜猜我是什么颜色？</p>
        </div>
    </div>
</div>
</body>

答案揭晓，是红色！！！！为什么呢？

因为按照上面权重规则计算权重

第一组：10+1+1+1=13

第二组：10+100+1+1=112

第三组：1+100+1+1=103

第四组：1+1=2

第五组：1

不难看出第二组权重112，最高，所以最后显示的颜色为红色。

四、再举个栗子(规则二：权重相同）

思考一下下面的例子最终两个标题的颜色？？

<html>
<head>
<style type="text/css">
.red {	
    color: red;	
}	
.blue {	
    color: blue;	
}
</style>
</head>
<body>
<h1 class="red blue">这是标题 1</h1>
<h2 class="blue red">这是标题 2</h2>
</body>
</html>

根据优先级规则二：权重相同时应用靠后定义的样式。这里靠后是指在样式文件或者<style>标签中定义时位置靠后的元素，同时遵循“元素上的style” > “文件头上的style元素” >“外部样式文件”的优先级。

按照上面所述的规则，蓝色样式定义的位置在红色样式之后，相对靠后，所以最终两个颜色都是蓝色。

权值相同时，与使用class时的先后位置无关，与样式定义的位置有关。

—————————————————————————2020.12.03更新——————————————————————————————

针对max-height/width和min-height/width这四个样式属性时，即使height和width设置了!important属性，前者的优先还是更高。且满足min-height/min-width > max-height/max-width > !important。