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

css样式优先级示例

2016-06-14 20:16 501 查看

1.一个DIV中既有class又有id

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#box1{color:red;}
.box1{color:blue;}
.box2{color:blue;}
#box2{color:red;}
</style>
</head>
<body>
<div  class="box1" id="box1">
Hello
</div>

<div  class="box2" id="box2">
Word
</div>
<!--说明id作用力大于class，且与位置无关-->
</body>
</html>

2.一个div中有多个class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.red {color:red;}
.blue{color:blue;}
</style>
</head>
<body>
<div  class="red blue" >
Hello
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.blue{color:blue;}
.red {color:red;}
</style>
</head>
<body>
<div  class="red blue" >
Hello
</div>
</body>
<!--结果是：第一个是蓝色，第二个是红色。
说明：有两个类，会按照div引用的class中，在css中最后一个定义为准-->
</html>

3.伪类选择器与class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
/*下边执行顺序不影响结果*/
.red {color:red;}
.red>div:first-child{color:pink;}/*作用域第1*/
.red>div{color:blue;}/*作用域第2*/
.green {color:green;}/*作用域第3*/
</style>
</head>
<body>
<div  class="red" >
<div class="green">
Hello<!--颜色为pink-->
</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航