我认为这是 Silvestar Bistrović 的 好建议
启用选择器是指我所说的在不禁用特定规则的情况下执行工作的选择器。
经典的例子是将 margin
应用于所有元素,只是为了不得不从最后一个元素中删除它,因为它在你不想要的地方添加了空间。
.card {
margin-bottom: 1rem;
}
/* Wait but not on the last one!! */
.parent-of-cards :last-child {
margin-bottom: 0;
}
你也可以做...
/* "Disabling" rule */
.card:last-child {
margin-bottom: 0;
}
但这可能不像从父级选择那样具有上下文。
另一个变体是
.card:not(:last-child) {
margin-bottom: 1rem;
}
这就是Silvestar 所谓的“启用”,因为你只是在应用这条规则,而不是应用它,然后用另一个选择器在后面移除它。我同意,这更难理解,也更容易出错。
另一个例子是 Lobotomized Owls 的作用域版本
/* Only space them out if they stack */
.card + .card {
margin-top: 1rem;
}
我认为 gap
是从长远来看所有这些走向的方向。将责任放在父级而不是子级上,并保持它是一个启用选择器
.parent-of-cards {
display: grid;
gap: 1rem;
}
我个人喜欢使用这个选择器
* + .card
。星号的美妙之处在于它不会增加特异性。我同意。我在代码审查中看到了这种类型的选择器,并且因为特异性问题而忽略了它。
虽然我喜欢启用与禁用的想法,但我非常不同意它的实现方式。
我个人更喜欢可读性,而禁用代码是明确的,它做到了它所说的。另一个需要一些思考才能理解。现在想象一下将其中一些组合起来,或者不得不维护另一个开发人员的代码。
特别是对于 :not,扩展选择器变得相当令人沮丧,但实际上你需要这样做。看看一个选择器来定位除了第一个和最后一个之外的所有元素,不会让我开心。
这里还有一个启用器
.parent-of-cards > * + * {margin-top: 1rem}