css - DRY up CSS - 一个 child 的多个 parent

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()当有多个父级时，删除公共(public)子级选择器的重复项:

: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