此问题在此处已有答案：
What do commas and spaces in multiple classes mean in CSS?（9个回答）
4天前关闭。
我不能安静地理解构造由多个选择器组成的选择器的规则。
我认为有可能让这样的选择器由多个选择器组成，包含其他选择器的示例，这些选择器也由多个选择器组成。从我所看到的情况来看，有时可能有时不可能。例如，下面是HTML：
<!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>
div{
border:solid red 10px;
margin:10px;
}
p{
background-color: orange;
}
div>div,p{
border:solid black 7px;
background-color: blue;
}
</style>
</head>
<body>
<div class="small">AAA</div>
<div>
<p>AAA</p>
<div class="small">AAA</div>
</div>
<div>
<p>AAA</p>
<div class="small">AAA</div>
</div>
<div>
<p>AAA</p>
<div class="small">AAA</div>
</div>
<div class="small">AAA</div>
<p>AAA</p>
</body>
</html>字符集
为什么就div而言，一切都像预期的那样工作，只有其他div的孩子的div是用第三条规则设计的，其余的都是用第一条规则设计的，但是由于某种原因，段落根据第三条规则设计，即使它根本不是div的孩子。
然后我想可能是因为段落没有定义任何规则，然后根据一些规则，我不知道浏览器会应用它在页面上找到的任何样式，所以我决定用第二条规则专门为段落定义一个样式。但更令人困惑的是，出于某种原因，不仅第三条规则适用于div之外的p，甚至不是它的后代，而且第三条规则也适用于重写为段落专门定义的第二个规则。
这对我来说很困惑，我不明白为什么我不能合并。从我的理解到现在为止，第一个应该选择div中的所有元素，然后第二个分组选择器应该选择div和p类型的div中的所有元素。但显然不是这样的，我在某种程度上弄错了。在css中构造选择器的规则到底是什么？是由多个选择器组成的吗
1条答案
按热度按时间nwlqm0z11#
逗号分隔多个选择器，以便您可以将相同的规则集应用于不同的选择器。用逗号分隔的多个选择器不会组合在一起。您描述的最后一个规则集是
div的选择器，它是div或p标记的子级。规则集也可以写成：字符集
因为CSS是自上而下计算的，所以最后的规则优先。
例如，如果我给予选择器
div>p,a>div，这将计算为两个选择器：div>p和a>div，而不是“div标记是p的直接子标记，或a标记是div的直接子标记”。不幸的是，使用CSS必须重新定义整个链，所以如果你只想要
div标签的直接后代p标签，你必须使用选择器div>div, div>p。:is()选择器作为一种“或”，这就是你要找的。