权值 

默认情况下，优先级：
    行内样式>内部样式>外部样式
但有时候会因为权值的问题，不遵循上述的优先级
比如：
<head>
    <meta charset="UTF-8">
    <style>
        /*权值大的生效*/
        /*100+1+1=102*/
        #redp p em{
            color: red;
        }
        /*100+10+1=111*/
        #redp .red em{
            color: blue;
        }
        /*100+1+1+1=103*/
        #redp p span em{
            color: yellow;
        }
    </style>
    <title>权值</title>
</head>
<body>

<div id="redp">
    <p class="red">红色
        <span><em>蓝色</em></span>
    </p>
</div>

</body>

运行结果：


如果按就近原则来看，“蓝色”二字应该显示为黄色，但结果却是蓝色。
这就涉及一个权值的问题。
选择器        权值
ID选择器：    100
类选择：      10
标签选择器：   1
经过计算，我们发现第二个样式的权值最大：111，所以显示为蓝色。
posted @ 2017-07-24 09:30  被窝是青春的坟墓！  阅读(182)  评论(0)  编辑  收藏  举报