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

Question

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

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

但我经常看到这样的情况：

.shopProductsProductDesc > .warning {
     color: red;
}

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

Answer 1

这实际上取决于您想要解决的问题。

据我了解，选择器.shop > .products > .product > .description > .warning将用于两种情况：

1. 您有多个warning元素，但您只想选择其中的元素description，并且还有其他选择器用于warning您不想覆盖的元素。
2. 您需要覆盖以前不太具体的选择器。前任。.shop > .products > .product > .description .warning

另一个选择器.shopProductsProductDesc > .warning不如第一个选择器具体，但假设 的容器.warning具有这两个类.description.shopProductsProductDesc，那么结果将与第一个选择器相同。

CSS 是关于特异性的，如果您的选择器比上次使用的选择器更具体，则属性将会改变。这就是为什么在使用特定选择器时必须小心的原因，因为更改属性的最后一个选项是使用!important.

我希望这有助于解决问题。