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

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

Answer 4

这是一个在线工具。可以删除重复的CSS（定义和变量）