css优先级计算规则——权重
⼀、css的优先级
  当对同⼀个元素设置相同的多个声明时，会按照优先级的⾼低选择应⽤哪种声明。
<style>
#id{
color:red;
}
p{
color:blue;
}
</style>
<div id="te">
      　<!-- p元素内的颜⾊设置为black，因为对p元素的设置，该段代码中⾏内样式的优先级最⾼ --!>
<p id="id" ></p>
</div>
⼆、优先级的计算⽅式——权重
  1、权重计算的基础
    内联样式：1000
    id选择器：0100css样式表优先级最高
    类、伪类、属性选择器：0010
    元素、伪元素选择器：0001
    通配符:0000
  2、⽐较规则
    a、1,0,0,0 > 0,99,99,99
    b、内部样式和外部样式优先级相同
    c、权重相同的情况下，后写的会覆盖先写的样式
    d、使⽤后代选择器和⼦类选择器，则需要把某个元素所有的修饰权值相加，即修饰的越精确，权值越⾼，如：
        　.class p[type="text"]{color:#000;}/*权值：0021*/，
        　该样式中，关于p元素的权值为，⼀个类选择器0010，⼀个元素选择器0001，⼀个属性选择器0010，最终结果0021。　
<div id="te" class="cte">
<div>div</div>
<p type="text">345</p>
<p id="id">123</p>
<p class="class">666</p>
<p text="text">777</p>
<p ></p><!-- 权值：1000 --!>
</div>
*{color:green;}/*权值：0000*/
p{color:#00f;}/*权值：0001*/
div p{color:orange;}/*权值：0002*/
.class{color:gray;}/*权值：0010*/
.class p[type="text"]{color:#000;}/*权值：0021*/
#id{color:red;}/*权值：0100*/
div #id{color:red;}/*权值：0101*/
三、特殊的优先级
  !important，它没有权重，但是加上这个标签后，该声明就是最⾼优先级，⼤于内联样式。
  如果在某个声明中加了!important，则该页⾯中⽆论后⾯加了其他什么样的样式，⽣效的只有这个。
<style>
*{
color:green!important;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。