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

html css层叠样式基础（选择器的优先级）（六）

2017-02-06 23:38 561 查看

1.选择器的优先级：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

div{
width: 100px;
height: 100px;
background-color: red;
}

/*
当使用不同的选择器选择同一个元素，并且设置相同的样式时，此时会发生样式的冲突
此时到底应用哪个样式由选择器的优先级来决定，优先级高的优先显示

选择器的优先级（权重）

1. 内联样式优先级是 1000
2. id选择器优先级是 100
#box1 {}
3. 类和伪类选择器优先级 10
.b1.b2.b3.b4.b5.b6.b7.b8.b9.b10.b11 {}
4. 元素选择器优先级 1
5. 通配选择器优先级 0
6. 继承的样式没有优先级

当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后在进行比较
优先级高的优先显示，选择器的计算不会超过其最大的数量级

如果两个选择器的优先级相同，则谁在下边就用谁
*
* */

*{
font-size: 80px;
}

p{
font-size: 40px;
}

/*#d1{
background-color: blue;
}*/

div.d2{
background-color: skyblue;
}

.d2{
/*
如果在样式的最后添加一个!important，则该样式将会获取到最高的优先级，
将会优先于所有的样式显示，但是这个东西慎用
* */
/*background-color: yellow !important;*/
}

/*分组选择器的优先级都是单独计算*/
p , div , h1 , #p1{

}

.d4{
background-color: yellow;
}

.d3{
background-color: red;
}

</style>
</head>
<body>

<div class="d3 d4 d5" style="width: 100px; height: 100px;"></div>

<hr />

<div id="d1" class="d2" style="background-color: yellowgreen;" >

</div>

<p>我是一个p元素<span>我是p中的span</span></p>

</body>
</html>

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

标签： html css 经验

相关文章推荐

新的分享

章节导航