`body.className div.className` 如何优先于 `div.className.className2`？
How does `body.className div.className` take precedence over `div.className.className2`?
我的意思是：
body.class1 div.class1 {
color: blue;
}
div.class1.class2 {
color: red;
}
<body class="class1">
<div class="class1 class2">
Hello
</div>
</body>
div.className.className2 具有最具体的元素，所以我认为这会优先。但事实证明添加父选择器优先于额外的类名。
谁能指出解释这种情况的规则？我好像不太容易在网上找到它。
您的印象似乎是只有规则中最深元素的组件才计入特异性。这是不正确的，选择器中的每个 element/modifier 都被计算在内。
最具体的规则是body.class1 div.class1，它有两个标签名和两个class名。
div.class1.class2 也有两个 class 名称（并列），但只有一个标签名称
div.class1.class2.class3 会赢，因为它有三个 class 名称，而 class 名称总是比无限数量的标签名称更有价值。
试试看
我的意思是：
body.class1 div.class1 {
color: blue;
}
div.class1.class2 {
color: red;
}
<body class="class1">
<div class="class1 class2">
Hello
</div>
</body>
div.className.className2 具有最具体的元素，所以我认为这会优先。但事实证明添加父选择器优先于额外的类名。
谁能指出解释这种情况的规则？我好像不太容易在网上找到它。
您的印象似乎是只有规则中最深元素的组件才计入特异性。这是不正确的，选择器中的每个 element/modifier 都被计算在内。
最具体的规则是
body.class1 div.class1，它有两个标签名和两个class名。div.class1.class2也有两个 class 名称（并列），但只有一个标签名称div.class1.class2.class3会赢，因为它有三个 class 名称，而 class 名称总是比无限数量的标签名称更有价值。