CSS层叠和继承

时间 2019-11-17

标签 css 层叠继承栏目 CSS 繁體版

原文原文链接

　　CSS具备两个核心的概念——继承和层叠。通常文本类的属性会被继承，即某个元素的CSS属性会传递给内部嵌套的元素。一个元素可能有一个或者多个样式的来源，当属性发生冲突时，就会根据加载顺序和权重大小决定层叠以后显示的属性。先看一个层叠机制表，并对照例子观察层叠规律：css

	行内	id	class	元素
行内	1	0	0	0
id	0	1	0	0
class、属性、伪类	0	0	1	0
元素、伪元素	0	0	0	1
通配符 *	0	0	0	0
!important	最高

　　不一样的选择器具备不一样的权重值，只有在选择器指向同一元素的时候才会比较权重，如 #wrapper span 和 span[name=test] 并非指向同一元素，由于后面的选择器指向属性name为test的span元素，因此后面选择器的属性生效，没有冲突的样式才会应用前面选择器的。html

<div id="wrapper">
    <span name="test"><span>
</div>

　　对全部类型设置字体颜色，结果以下：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css优先级测试</title>
    <style>
        #test{  color: orange;}
        .test{  color: yellow;  }
        p{  color: green;  }
        *{  color: cyan;  }
        p{  !important;  color: blue;  }
        span{  color: purple;  }
    </style>
</head>
<body>
    <p style="color: red">内嵌红色</p>
    <p id="test">id橙色</p>
    <p class="test">class黄色</p>
    <p>元素绿色</p>
    <p>通配青色</p>
    <p>最高蓝色</p>
    <p> <span>子元素紫色</span> </p>
</body>
</html>

　　在页面中显示结果以下：测试

　　能够看到元素和通配符设置的CSS属性没有显示自己的文字颜色，其他均正确显示设置的颜色，检查内嵌、id和class的样式变化，结果以下：字体

　　能够看到，网页先进行继承，将通配给html和body的青色断定后，在进行对这个p元素的CSS颜色设置，随后根据权重前后选择了通配、元素、最高的颜色，最后锁定类名设置的黄色，经过这样的比较，前面6组都能获得结果，最后一个span检查结果以下：spa

　　如今缘由也是一目了然，span元素逐级继承，此处的p元素文本是蓝色，再对span元素进行层叠，有通配的青色和元素的紫色，因为元素优先级高，全部采用了元素设置的紫色。3d

　　对同一个元素，分别设置内嵌、id、class和元素选择器设置颜色，内嵌字体颜色红色，id橙色，class黄色，元素绿色，代码以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css同一元素优先级测试</title>
    <style>
        #test{  color: orange;}
        .test{  color: yellow;  }
        p{  color: green; }
    </style>
</head>
<body>
    <p id="test" class="test" style="color: red">同一元素测试</p>
</body>
</html>

　　网页中显示结果以下：htm

　　检查其变换规则：blog

　　元素选择器优先级最低，绿色最底层，伪类黄色其次，id橙色再层叠，内嵌优先级最高，红色在最上方，最后显示红色。

　　对于嵌套元素，针对该元素采用不一样的叠加，须要比较每一位数值比较其重要性，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css层叠测试</title>
    <style>
        .box1 .p1 span{color: red;}
        .box1 span{color: blue;}
        .box1 p span{color: green;}
    </style>
</head>
<body>
    <div class="box1">
        <p class="p1">
            <span>四川</span>
        </p>
    </div>
</body>
</html>

　　显示结果以下：

　　首先.box1 span的层叠数为0 0 1 1，.box1 p span的数值为0 0 1 2，.box1 .p1 span的数值为0 0 2 1，因此先采用数值最小的颜色，再被数值较大的绿色覆盖，最后是数值最大的红色，最终被显示。

　　总结一下，html的层叠是由通配、元素和伪元素、class和伪类、id、内嵌从底层往上层依次层叠，对于同一级的选择器，具备!important;属性的优先级最高，不然就要根据其放置的顺序判断。元素属性从最大一级的祖先元素继承，依次判断继承直至到该元素内容所在的设置有css样式的最里面一层。