CSS初步--样式的层叠和继承

来源：互联网发布：搜索软件编辑：程序博客网时间：2024/05/19 13:55

1.样式如何层叠
浏览器要显示元素时求索一个CSS属性值的次序：(1) 元素内嵌样式 (2) 文档内嵌样式 (3) 外部样式 (4) 用户样式 (5) 浏览器默认样式。元素内嵌样式、文档内嵌样式和外部样式表合称为作者样式，定义在用户样式表中的样式称为用户样式，浏览器定义的样式称为浏览器样式。

2.用重要样式调整层叠次序
把样式属性值标记为重要，可以改变正常的层叠次序，例如:

<html><head>    <title>hhhhfff</title>    <style type="text/css">        a{            color:red !important;        }    </style></head><body><a title="测试内容" href="http://www.baidu.com" style="color:black;">百度</a></body></html>

可以清楚地看到文档内嵌样式的color属性值盖过了元素内嵌样式中的值。

3.根据具体程度和定义次序解决同级样式冲突
如果有两条定义在同一层次的样式都能应用于同一个元素，为了判断该用哪个值，浏览器会评估两条样式的具体程度，然后选中较为特殊的那条。样式的具体程序通过统计三类特征得出：(1) 样式的选择器中id的数目 (2) 选择器中其他属性和伪类的数目 (3) 选择器中元素名和伪元素的数目。先看一个简单的案例:

<html><head>    <title>hhhhfff</title>    <style type="text/css">        a{            color:red;        }        a.myclass        {            color:white;            background-color: grey;        }    </style></head><body><a title="测试内容" href="http://www.baidu.com" class="myclass">百度</a><a href="http://www.qq.com">腾讯</a></body></html>

a.myclass选择器含有一个class属性，于是该样式的值为0-1-0(0个id值+1个其他属性+0个元素名)；另一条样式的具体程度值为0-0-0.因此浏览器呈现被归入myclass类的a元素时将使用a.myclass样式中设定的color属性值；对于所有其他a元素，使用的是另一条样式中设定的值。
如果同一个样式属性出现在程度相当的几条样式中，那么浏览器会根据其位置的先后选择所用的值，规则是选用后面的。例:

<html><head>    <title>hhhhfff</title>    <style type="text/css">        a.myclass1{            color:red;        }        a.myclass2        {            color:white;            background-color: grey;        }    </style></head><body><a title="测试内容" href="http://www.baidu.com" class="myclass1 myclass2">百度</a></body></html>

这里写图片描述
可以清楚地看到color属性选用的值是靠后那条样式的white。
为了验证浏览器的选择方式，现在将上面的例子的两条样式交换位置:

<html><head>    <title>hhhhfff</title>    <style type="text/css">        a.myclass2        {            color:white;            background-color: grey;        }        a.myclass1{            color:red;        }    </style></head><body><a title="测试内容" href="http://www.baidu.com" class="myclass1 myclass2">百度</a></body></html>

得到的结果为:
这里写图片描述

3.继承
如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的之歌样式属性值。例如：

<html><head>    <title>hhhhfff</title>   <style type="text/css">    p{        color: white;        background: grey;        border:medium solid black;    }   </style></head><body><p>I like <span>apples</span> and pears.</p></body></html>

效果如下：
这里写图片描述
可以看到，span元素使用的样式为其父元素的样式。需要注意的是，并非所有的CSS属性均可继承，与元素外观相关的样式会被继承，与元素在页面上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行实施继承，明确表示浏览器在该属性上使用父元素样式中的值。
这里写图片描述
在这里可以看到span元素继承了p元素的border属性，和p元素一样均具有边框。

0 0