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

CSS覆盖公共样式中的某个属性

2017-07-31 18:07 267 查看
CSS如何覆盖公共样式中的某个属性？利用CSS样式的优先级。

如下例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.x{color: red;}
.a .x{color:blue;}
.a .b .x{color:green;}
</style>
</head>
<body>
<div class="x">你好</div>
<div class="a">
<div class="x">你好</div>
</div>
<div class="b">
<div class="x">你好</div>
</div>
<div class="a">
<div class="b">
<div class="x">你好</div>
</div>
</div>
</body>
</html>


页面上字体颜色从上到下，依次是红、蓝、红、绿

有层级关系的样式，越精确的优先级越高。

　　利用这一个 特点，当公共样式中，当有需要特殊处理的样式，可以使用此种方法：
　　在当前样式前的父级，添加一个独一无二的样式名称。

　　另外，当父级中有多个样式的时候，如下：

<div class="a b">
<div class="x">你好</div>
</div>


　　可以定义两个父级样式中的任何一个

<style type="text/css">
.a .x{color:blue;}
.b .x{color:green;
</style>


　　如果同时定义了两个父级样式，这个时候字体的颜色就与css中，这两个父级样式的顺序有关了，后加载的样式优先，此时后加载的是.b .x，所以字体颜色是绿色
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航