干掉CSS - 给一个孩子多个父母

Question

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

如果父元素无关紧要，那么您只需使用：

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

参考文献

• https://web.dev/css-is-and-where
• https://caniuse.com/css-matches-pseudo

Answer 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层次结构，您甚至可以进一步缩小范围。