干掉 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

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