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

前端学习 -- Css -- 选择器的优先级

2017-04-04 19:03 531 查看
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
优先级的规则

内联样式 ， 优先级 1000

id选择器，优先级 100

类和伪类， 优先级 10

元素选择器，优先级 1

通配* ， 优先级 0

继承的样式，没有优先级

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。

并集选择器的优先级是单独计算
div , p , #p1 , .hello{}

可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important

分别测试下这6种情况：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
background-color: yellow;
}

p {
background-color: red;
}

* {
font-size: 50px;
}

p {
font-size: 30px;
}

#p2 {
background-color: yellowgreen;
}

p#p2 {
background-color: red;
}

.p3 {
color: green;
}
</style>
</head>

<body>

<p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落
<span>我是p标签中的span</span>
</p>

</body>

</html>


background-color:

p#p2 :继承的样式，没有优先级；

*p:通配* 优先级0；

p :元素选择器，优先级 1；

.p1:类和伪类， 优先级 10；

p2 优先级 100；

style="background-color: orange;"优先级1000；

因此背景颜色为 organge。

color：

p3:因为只有这一个设置color因此绿色。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航