您的位置：首页 > Web前端 > CSS

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

2016-11-06 19:17 363 查看

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.继承

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

<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元素一样均具有边框。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html5

相关文章推荐

新的分享

章节导航