CSS的三大特性

最新推荐文章于 2023-01-20 10:00:00 发布

爱不到要偷

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量149

点赞数

原文链接：http://www.cnblogs.com/fantianlong/p/11316546.html

版权

一、优先级

所谓优先级，就是指一个标签的显示效果（样式表现），可能受若干个因素的影响，但哪一个因素的影响大，则最终效果就按该因素的设定，也就是“更优先”的意思。

优先级排名:伪元素选择器 > !important > 行内样式 > id选择器 > 类选择器（或伪类选择器） > 元素选择器 > * > 继承样式 > 浏览器默认样式,不仅仅只是行间>内部>外部。

上述黄色背景部分在实际应用中最常见。

计算规则:选择器的特殊性值表述为4个部分，用0,0,0,0表示。

ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important，它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0

错误的说法

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：选择器的权值不能进位。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100，你可以理解为 99.99，所以最终应用后者样式。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #b1 {color: yellow;}
        .a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>p {color: red}
    </style>
</head>
<body>
    <div class="a1">
        <div class="a1">
            <div class="a1">
                <div class="a1">
                    <div class="a1">
                        <div class="a1">
                            <div class="a1">
                                <div class="a1">
                                    <div class="a1">
                                        <div class="a1">
                                            <div class="a1">
                                                <p id="b1">文本</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

错误的优先级比较:

#b1:100

.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1 p:111

正确的优先级比较:

#b1: 0 1 0 0

.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1>.a1 p: 0 0 11 1

从左到右依次比较每位的数值,数值大的选择器优先级高,最终为显示的样式,因为第二位1>0,所以#b1样式优先级高,为最终显示的样式。

二、层叠性

所谓层叠性，是指对同一元素同一属性选择器优先级一致的设定，是优先级特性的一种特殊情况,即后设定的某个样式（属性），会覆盖之前设定的样式。

分两种情况：

１，两个相同的选择器，设置了同样的属性，后者覆盖前者——层叠性体现之一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .c1 {color: red;}
        .c1 {color: blue;}
    </style>
</head>
<body>
    <p class="c1">c1</p>
    <p class="c1">c1</p>
</body>
</html>

最终color:blue

２，两个不同但相同优先级的选择器，设置了同样的属性，也是后者覆盖前者——层叠性体现之二。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .c1 {color: red;}
        .c2 {color: blue;}
    </style>
</head>
<body>
    <p class="c1 c2">c1</p>
    <p class="c1 c2">c1</p>
</body>
</html>

最终background:blue