DRY up CSS - 一个孩子的多个父母答案

【问题标题】：DRY up CSS - multiple parents to one childDRY up CSS - 一个孩子的多个父母
【发布时间】：2015-02-11 22:05:21
【问题描述】：

我在下面分别列出了几个层次结构，其中第一个选择器是父 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;
}

【问题讨论】：

标签： css css-selectors dry

【解决方案1】：

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

.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;
}

【讨论】：

【解决方案2】：

当有多个父级时，可以使用伪类选择器: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;
}

参考

【讨论】：

【解决方案3】：

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

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

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

【讨论】：