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

69 阅读1分钟

启用选择器就是我所说的在不禁用特定规则的情况下完成一项工作的选择器。

典型的例子是将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-of-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;
}