CSS选择器采用令牌还是子串算法？为何.square__element样式未生效？

结论 #

.square__element 定义的CSS样式不会应用到class为square__element--modifier的Square 2元素。

匹配逻辑说明 #

CSS类选择器采用令牌匹配规则，而非子串匹配：

• 元素的class属性值是由空格分隔的多个独立"类令牌"组成的列表。
• 类选择器.className仅会匹配那些class属性中包含完全等于className的独立令牌的元素，不会匹配包含该字符串作为子串的其他令牌。

对应你的代码场景：

• Square 1的class="square__element"包含独立令牌square__element，因此会被.square__element选择器匹配。
• Square 2的class="square__element--modifier"仅包含一个独立令牌square__element--modifier，该令牌与square__element完全不同，所以不会被匹配。

若要让Square 2同时应用基础样式和修改器样式，需将其class属性改为包含两个独立令牌：class="square__element square__element--modifier"，此时.square__element会匹配该元素，你还可以单独为.square__element--modifier定义专属的修改样式。

规范依据 #

CSS选择器规范明确规定：

类选择器匹配拥有class属性且属性值中包含与选择器类名完全相同的独立标识符的元素。class属性的属性值是一个以空格分隔的标识符集合，每个标识符都是一个独立的类名。

内容的提问来源于stack exchange，提问作者Redgard