css权重问题例子详解

首先，id选择器权重级别最高，class选择器其次，html选择器最后。 例子：

<div class="t1" id="one">
    <div class="t2" id="two">
        <div class="t3" id="three">
            <span>嘿嘿嘿</span>
        </div>
    </div>
</div>

选中span标签

当选中span标签，也可能权重相同，也可能不同，得分下面2种情况。

1.权重相同，谁在后面谁决定。（下面例子嘿嘿嘿的字体颜色为黄色）

<style>
    div.t2 span { 
        color:red;
    }
    div.t1 span {
        color:yellow;
    }
</style>

2.权重不同，权重大的决定。（下面例子嘿嘿嘿的字体颜色为黄色）

<style>
    /**class选择器最高级只有一个**/
    div div.t1 span {
        color:red;
    }
    /**id选择器最高级也只有一个，但级别比class高**/
    #one span {
        color:yellow;
    }
</style>

没选中span标签

如果没选中span标签，谁描述得近就谁决定，如果一样近就再比权重，可以分为下面3种情况。

1.描述得近的决定。（下面例子嘿嘿嘿的字体颜色为黄色）

<style>
    /**t3描述得最近**/
    .t3 {
        color:yellow;
    }
    #two {
        color:red;
    }
    div.t1 #one {
        color:green;
    }
</style>

2.描述得一样近，权重不同，权重大的决定。（下面例子嘿嘿嘿的字体颜色为黄色）

<style>
    /**多一个html选择器div**/
    div.t1 div.t2 {
        color:yellow;
    }
    div.t1 .t2 {
        color:red;
    }
</style>

3.描述得一样近，权重相同，谁在后面谁决定。（下面例子嘿嘿嘿的字体颜色为红色）

<style>
    div.t1 div.t2 {
        color:yellow;
    }
    div.t1 div.t2 {
        color:red;
    }
</style>

特别的！important

如果在某个属性后面加个！important，那么它权重无限大。

下面例子如果不加！important嘿嘿嘿就是红色，加了后就变成黄色了。

<style>
     #two span {
        color:red;
    }
    .t2 span {
        color:yellow !important;
    }
</style>

转载于:https://www.cnblogs.com/Chenguohong/p/7088160.html