DRY up CSS - 多个 parents 到一个 child

Question

我在下面分别列出了几个层次结构，其中第一个选择器是 parent div，第二个是 div 中的图像项。但我能以某种方式将它们结合起来吗？

.outdoors .how-to-image {
  cursor: pointer;
}

.snowsports .how-to-image {
  cursor: pointer;
}

.stripe .how-to-image {
  cursor: pointer;
}

.twilio .how-to-image {
  cursor: pointer;
}

.rental_requests .how-to-image {
  cursor: pointer;
}

Answer 1

当然，您可以通过用逗号分隔来组合选择器：

.outdoors .how-to-image, .snowsports .how-to-image, .stripe .how-to-image, .twilio .how-to-image, .rental_requests .how-to-image {
  cursor: pointer;
}

根据 HTML 层次结构，您甚至可以进一步缩小范围。

Answer 2

如果父元素无关紧要，那么您可以简单地使用：

.how-to-image {
  cursor: pointer;
}

否则，您将不得不组合选择器。最简单的形式是：

.outdoors .how-to-image,
.snowsports .how-to-image,
.stripe .how-to-image,
.twilio .how-to-image,
.rental_requests .how-to-image {
  cursor: pointer;
}

除此之外，没有其他方法可以简化它。即使你使用LESS，也会输出同样的结果。

.outdoors, .snowsports, .stripe, .twilio, .rental_requests {
  .how-to-image {
    cursor: pointer;
  }
}

输出：

.outdoors .how-to-image,
.snowsports .how-to-image,
.stripe .how-to-image,
.twilio .how-to-image,
.rental_requests .how-to-image {
  cursor: pointer;
}

Answer 3

当有多个父选择器时，您可以使用伪class选择器:is()去重公共子选择器：

:is(.outdoors, .snowsports, .stripe, .twilio, .rental_requests) .how-to-image {
  cursor: pointer;
}

上面的代码等同于：

.outdoors .how-to-image,
.snowsports .how-to-image,
.stripe .how-to-image,
.twilio .how-to-image,
.rental_requests .how-to-image {
  cursor: pointer;
}

DRY up CSS - 多个 parents 到一个 child

DRY up CSS - multiple parents to one child

css

css-selectors

dry

参考资料