我有以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.square__element {
font-size: 20px;
padding: 50px;
background-color: orange;
}
</style>
<title>Document</title>
</head>
<body>
<div class="square__element">Square 1</div>
<div class="square__element--modifier">Square 2</div>
</body>
</html>
当我运行它时，.square__element{}selector中声明的任何样式都不会应用于“Square 2”element。 最初我认为“Square 2”元素应该应用 .square__element{} 选择器中声明的所有样式。这就是为什么我在谷歌上搜索了一些搜索查询，试图弄清楚是否是我有错误的期望，或者我的浏览器是否出现了故障。但我发现没有任何帮助。
然后我打开了w3c，研究了大约一个小时的规范。我浏览了整个“语法”章节，但也没有找到答案。
最后，我询问了我可以使用的所有人工智能聊天内容。 他们（Bard、Chat GPT 和 Copilot）告诉我，.square__element{} 中声明的样式应该应用于“Square 2”元素，因为
“CSS 处理器使用子字符串匹配算法”但是 Bing 聊天告诉我，除非我用空格分隔
<div class="square__element square__element--modifier">Square 2</div>，否则不应该
应用样式，因为
“CSS 处理器不使用子字符串匹配算法，而是使用 令牌匹配算法，其中令牌是字符序列 不是空格、制表符、换行符或其他分隔符。 ”所以，我仍然不知道正确答案。 有人可以帮我弄清楚 .square__element{} 选择器中声明的规则是否应该应用于“Square 2”元素吗？ 也许可以指出规范中我错过的解释的地方。
square__element
和
square__element--modifier都是两个不同的有效类名。 添加这样的修饰符只是一个
命名约定，表示修饰符正在向基类应用或修改某些样式（square_element
）。通常在使用时包含这两个类。您可以在Boostrap 类中看到许多类似的示例，例如
btn btn-lg，其中
btn-lg应用或覆盖一些附加样式到
btn。