CSS:选择深度嵌套元素的最佳实践

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题.

去年关闭。




Improve this question




我经常需要处理页面某些特定部分中的通用元素。我发现这种方法在任何规则影响的方面最容易理解:

.shop > .products > .product > .description > .warning {
   color: red;
 }

但是我经常看到这个:

.shopProductsProductDesc > .warning {
     color: red;
}

采取哪种方法真的很重要吗？

Answer 1

这实际上取决于您要解决的问题。
选择器 .shop > .products > .product > .description > .warning据我了解，将用于两种情况:

您有多个 warning元素，但您只想选择 description 中的元素并且还有其他选择器用于 warning你不想覆盖。

您需要覆盖之前不太具体的选择器。前任。 .shop > .products > .product > .description .warning

另一个选择器 .shopProductsProductDesc > .warning没有第一个那么具体，但假设容器为 .warning有这两个类 .description.shopProductsProductDesc那么结果将与第一个相同。
CSS 是关于特异性的，如果您的选择器比上一个使用的选择器更具体，则属性会发生变化。这就是为什么在使用特定选择器时必须小心的原因，因为更改属性的最后一个选项是使用 !important .
我希望这有助于清除问题。