收藏
收藏
收藏
转载于：
不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。
其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，就可以避免写出无法复用的样式，同时可以快速定位样式冲突无法应用的问题的根源。
一、样式优先级规则：
1.根据权重值排序，应用权重值第一的样式
2.如果权重值相同，则应用最后定义的样式（应避免这种情况，若出现问题，溯源的时候比较麻烦）
二、权重规则：
权重分为四个等级（有一个重要级角色不在此列）
第一等：内联样式，权重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样式如下:
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
.my-class div div p{color:green;}
.my-class #my-id div p{color:red;}
div #my-id div p{color:gary;}
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，最高，所以最后显示的颜色为红色。
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
