CSS选择器优先级规则解说

CSS选择器优先级规则当使用不同的选择器时，对同一个元素设置不同的样式时这个时候会产生冲突，最终浏览器会选择哪个选择器定义的样式，是由选择器的优先级（权重）决定。优先级高的优先...

CSS选择器优先级规则

当使用不同的选择器时，对同一个元素设置不同的样式时这个时候会产生冲突，最终浏览器会选择哪个选择器定义的样式，是由选择器的优先级（权重）决定。

优先级高的优先显示，优先级规则：

内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配选择器，优先级0
继承的样式，没有优先级

Note:1.两个选择器一样，谁靠后面使用谁的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
 * 因为p3的样式在后面所以显示P3的样式
 */
.p1{
color:red;
}
.p3{
color: blue;
}
			
</style>
</head>
<body>
<p class="p1 p3">选择器一样时，谁的样式在靠后显示谁</p>
</body>
</html>

2.当选择器中包含多个选择器时，需要将多个选择器的优先级相加再比较，但选择器优先级计算不会超过它的最大数量级。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
 * p+#p4优先级大于#p4
 */
#p4{
color:red;
}
p#p4{
color: blue;
}
			
</style>
</head>
<body>
<p class="p1 p3" id="p4">
包含多个选择器时，需要将多个选择器的优先级相加再比较
</p>
</body>
</html>

3.在样式最后添加**！important**时，此时该样式的优先级是最高的，将会优先于所有的样式。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-01 10:22
阅读 ( 380 )
分类：WEB前端开发

CSS选择器优先级规则解说

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »