css权重

权重大小

内嵌权重为1000

<p style="color: yellow;">ALEX</p>

id选择器的权重为100,类选择器的权重为10,标签选择器的权重为1.

/*1 1 1*/
#box1 .wrap2 p{
    color: red;
}

当权重一样的时候,是以后设置的属性为准,后来者居上。

如果标签元素被选中,谁的权重大,就显示谁的属性

.如果没有被选中标签元素,权重为0。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*此时标签没有被选中,权重为0*/
            .father{
                background: green;
                color: red;
            }
            p{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="father" >
            <div class="child">
                <p>ALEX</p>
            </div>
        </div>
    </body>
</html>

如果权重都是0 。

权重都是0:"就近原则" : 谁描述的近,就显示谁的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            /*显示*/
            .child {
                color: gray;
            }
            
            .father{
                background: green;
                color: red;
            }
            
        </style>
    </head>
    <body>
        <div class="father" >
            <div class="child">
                <p>ALEX</p>
            </div>
        </div>
    </body>
</html>

相关推荐