浅谈CSS中的继承性、特殊性、层叠性和重要性攻略

继承性

在CSS中，当某个元素没有设置特定的属性时，它会从其父元素中继承该属性。这种继承称为CSS的“继承性”。CSS属性根据其继承性可以分为两类：

可以继承的属性，如color、font-size、text-indent等；
不可继承的属性，如border、margin、padding等。

所有可继承的属性都会被继承到子元素上，但是不可继承的属性不会。

示例1：

<!DOCTYPE html>
<html>
<head>
    <title>CSS继承示例</title>
    <style type="text/css">
        body {
            font-size: 16px;
            color: #333;
        }

        h1 {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

上面这个示例中，p标签继承了body标签的font-size和color属性，而h1标签继承了body标签的color属性，并设置了自己的font-size属性。因此，h1标签中的文字颜色会变成与父元素相同的颜色，但是字体大小会变大。

特殊性

当多个CSS规则应用于同一元素时，可能会出现冲突。这时CSS会通过“特殊性”的概念来解决这个问题。特殊性是用于确定哪些规则将会覆盖其他规则的一种机制，并且它是从选择器中的某些值计算得出的。

CSS中特殊性的计算方法是根据选择器中某些值来进行计算。如以下示例选择器：

h1#title a.link:hover {}

其中，h1选择器特殊性计算公式为：0，1，0，0。#title选择器特殊性计算公式为：0，1，0，1。a.link选择器特殊性计算公式为：0，0，1，1。最后:hover选择器特殊性计算公式为：0，0，0，1。

计算后将四个维度上的值相加得到每条规则的特殊性，然后再进行比较，可得到哪条规则具有更高的特殊性。

示例2：

<!DOCTYPE html>
<html>
<head>
    <title>CSS特殊性示例</title>
    <style type="text/css">
        p {
            color: blue;
        }

        #content p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>这是一个段落</p>
    </div>
</body>
</html>

上面这个示例中，p标签既匹配了p选择器规则，又匹配了#content p选择器规则，但是因为后者的特殊性更高，所以p标签的文字颜色变成了红色。

层叠性

在CSS中，属性可以同时被多个规则应用，这时就需要使用层叠性来确定属性最终的值。层叠性的原则是：后来的规则会覆盖先前的规则，如果特殊性相同时，则使用后面的规则。

层叠性的实现过程是，首先找到所有匹配的规则，并将其按照特殊性顺序排序。然后将所有规则中具有相同特殊性的属性组合在一起，形成一个属性集合。接着按照顺序将所有属性应用到元素上。

示例3：

<!DOCTYPE html>
<html>
<head>
    <title>CSS层叠性示例</title>
    <style type="text/css">
        p {
            color: blue;
            font-size: 16px;
        }

        p {
            color: red;
        }

        p {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

上面这个示例中，p标签同时匹配了三个规则，它们都设置了p标签的color属性，但是由于最后一个规则特殊性更高，所以p标签的颜色最终变为了红色。而对于font-size属性，虽然其中的三个规则都设置了font-size属性，但是最终的font-size属性是24px，因为它就是最后一个规则设置的。

重要性

当样式表中的某一条规则使用!important关键字时，它的特殊性会被提升到最高级，优先级高于所有其他规则，包括内联样式表和行内样式。

!important关键字可以通过覆盖任何其他颜色样式来实现，它也可以在任何字体样式上工作。

示例4：

<!DOCTYPE html>
<html>
<head>
    <title>CSS重要性示例</title>
    <style type="text/css">
        p {
            color: blue !important;
            font-size: 16px;
        }

        #content p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>这是一个段落</p>
    </div>
</body>
</html>

上面这个示例中，两个规则同时匹配p标记，其中第一个规则设置了p标签的color属性，并使用了!important关键字。因为!important关键字的优先级更高，所以p标签的文字颜色变成了蓝色，而不是匹配第二个规则后变成红色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈CSS中的继承性,特殊性,层叠性和重要性 - Python技术站

浅谈CSS中的继承性,特殊性,层叠性和重要性

浅谈CSS中的继承性、特殊性、层叠性和重要性攻略

继承性

特殊性

层叠性

重要性

相关文章