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
- 阅读 ( 591 )
- 分类：WEB前端开发
