Css权重

来源：互联网发布：杭州行知小学老学区编辑：程序博客网时间：2024/05/20 07:51

css权重计算与比较

计算权重第一步

比较 id class html 选择器的数量

代码：

    <style>    /*计算权重第一步：比较id class html选择器的数量*/1.     #box1 .hezi2 p {            color: red;        }2.      div div #box3 p {            color: green;        }3.      div.hezi1 div.hezi2 div.hezi3 p {            color: blue;        }    </style></head><body>    <div class="hezi1" id="box1">        <div class="hezi2" id="box2">            <div class="hezi3" id="box3">                <p>你猜猜我是什么颜色?</p>            </div>        </div>    </div></body>

这里的权重比较为：

         id     class   html 1.       1       1       1   2.       1       0       3     3.       0       3       4

所以这里显示的是红色（权重比较 id>class>html）。

计算权重第二步

如果权重一样，那么后出现的会覆盖掉先出现的。

代码：

<style>/*计算权重的第二步: 如果权重一样，那么后出现的会覆盖掉先出现的。*/1.  #box1 #box2 p {        color: red;    }2.  #box2 #box3 p {        color: blue;    }</style></head><body>    <div class="hezi1" id="box1">        <div class="hezi2" id="box2">            <div class="hezi3" id="box3">                <p>你猜猜我是什么颜色?</p>            </div>        </div>    </div></body>

这里的权重比较为：

    id  class   html1.   2    0      12.   2    0      1

所以这里应该是显示蓝色。

计算权重第三步

看一下选择器是否直接选中目标元素，如果没有直接选中目标元素，那么他们的权重为0。

代码：

/*比较权重第三步: 看一下选择器是否直接选中目标元素，如果没有直接选中目标元素，那么他们的权重为0*/    #hezi1 #hezi2 #hezi3 {          color: red;    }    div.box div.box div.box {        color: green;    }    p {        color: blue;    }

这里前两个选择器都是没有选中目标元素只有第三个选中p元素，所以这里显示的是蓝色。

权重计算第四步

如果都没有选中，那么谁离目标元素近就听谁的。

代码（body内容同上）：

/*权重比较第四步： 如果都没有选中，那么谁离目标元素近就听谁的*/    #hezi2 #hezi3 {        color: green;    }    #hezi1 #hezi2 {        color: red;    }

heizi3离显示的p元素最近，所以这里显示的是绿色。

阅读全文

0 0