for all kinds of posts seen on the Internet, the weights of pseudo-class selector and class selector are all 10, but this is not the case in actual measurement
<style type="text/css">
.container div{
width: 100px;
height: 100px;
}
.container:nth-child(1) div{
background: blue;
}
.container div:nth-child(1){
background: red;
}
</style>
<body>
<div class="container">
<div></div>
</div>
</body>. Container:nth-child (1) div and .container div:nth-child (1) should be the same. My judgment is that the order in which the two styles are exchanged, the color of the div will change. However, the above pseudo-class selector + tag, the weight should be 11, the other is the class selector + pseudo-class selector, the weight should be 20. What is it like, please?
the other set of tests is as follows:
<style type="text/css">
div{
width: 100px;
height: 100px;
}
div:nth-child(1){
background: blue;
}
.demo{
background: red;
}
</style>
<body>
<div class="demo"></div>
</body> here, changing the order of div:nth-child (1) and .demo , div is always blue, does it mean that the pseudo-class selector is more important than the class selector?
was confused by these two groups of tests. I hope God explains that the test browser is chrome 69
.