你想要启用 CSS 选择器,而不是禁用选择器

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 200 美元的免费积分!

我认为这是 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;
}

直接链接 →