本文详细介绍了CSS样式优先级的计算规则，包括行内样式、ID选择器、类选择器和元素选择器的权重。通过实例展示了优先级如何决定元素的最终样式，特别提到了`!important`规则的优先级最高。通过代码示例，演示了不同选择器权重影响样式显示的过程，强调了理解优先级对于解决样式冲突的重要性。
css样式优先级
今天就浅谈一下css优先级的选择。总所周知，浏览器是通过优先级来判断在多层叠加样式时到底应该选用哪个元素，从而在那个元素上去编辑一些属性及数值/关键字。
那么，优先级是通过怎样来计算的呢，现在就需要考虑到各个选择器或者样式的权重，即计算优先级就是计算权重。当多个选择器同时选择到一个元素并且发送到不同的声明时，浏览器会优先选择权重占比最大的选择器，并接受它的声明。
在正式开始之前，需要说到一个例外，它不属于任何一个层次的优先级梯度，它是直接作用于结果。它就是！important规则。当在一个样式里使用这样一个声明，导致的结果就是此声明覆盖了其他所有的声明。而当有两条或者以上的样式带有这样的声明，就需要查看优先级了。
有业内人士为优先级规则做了一个细致的划分，就是设置一个未知的四位数。
当此元素有行内样式styLe="font-size:30px" 那么就在这个四位数的千位记作1.
当此元素有id选择器时，有几个id选择器就在这个四位数的百位记作几。
当此元素有类选择器/伪类选择器/属性选择器时，那么这个样式里有几个类选择器/伪类选择器/属性选择器，就在这个四位数的十位记作几。
当此元素有伪元素选择器/元素选择器时，那么这个样式里有几个伪元素选择器/元素选择器就在这个四位数的个位记几。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demo{
height: 100px;
width: 100px;
background-color: blue;
}
#demo{
height: 200px;
width: 200px;
background-color: chartreuse;
}
div{
height: 300px;
width: 300px;
background-color: cyan;
}
</style>
</head>
<body>
<div class="demo" id="demo" style="background-color: black;width: 50px;height: 50px;"></div>
</body>
</html>
相信结果大家都能预料到，是一个长宽为50px的黑色正方形
而我们将代码改一下，将行内样式去除的话，结果又会是怎么样的呢？
相信大家又猜到了，将id选择器注释掉的话，又会是怎样的画面呢？
没错，显示的是100*100的小方块，再将类选择器注释掉的话会是怎么样呢？
没错出现的是元素选择器所显示的样式，所以可以看出来选择器优先级是通过1、行内样式2、id选择器、3类选择器4、元素选择器这样一个顺序依次递减的
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
