疯狂的 CSS 选择器

我最近在 一篇博文 中使用此选择器作为示例

.article #comments ul > li > a.button {
  /* Crazy town */
}

有几条评论认为这似乎完全合理。我认为如果我们倒过来一步步分析，疯狂之处就会更加明显。

1. 它是一个具有 button 类的元素。
2. 但它必须是一个锚链接，否则将无法匹配。
3. 并且它必须是列表项的直接子元素。该列表项最好不要包含段落标签，否则将无法匹配。
4. 该列表项必须是无序列表的直接子元素。它最好不要是有序列表，否则将无法匹配。
5. 该无序列表需要位于具有 comments ID 的元素内。请记住，只有当它位于具有 article 类的元素内时，此规则才适用，否则将无法匹配。

所以，您是否有属于 button 类的元素，它们是列表项的直接子元素，而这些列表项又是无序列表的直接子元素，这些无序列表是 #comments 的子元素，并且是 .article 的子元素，但不是锚链接，因此需要以不同的方式进行样式设置？太疯狂了。

很有可能，选择器应该是

.button {
  /* Happy town */
}

如果您以后需要更改按钮样式，可以编写比这稍微更具体的样式来覆盖。

article .button {
  /* Buttons within articles are slightly different */
}

或者，为按钮添加一个额外的类以使其更具体。

<input type="submit" class="button big-button">
<!-- I have mostly the styles of buttons but a few overrides to make me bigger -->

非常相关：Harry Roberts 的 Shoot to kill; CSS selector intent。