html - 如何选择具有共享基类和附加类的元素的子元素？

Question

我有类似下面的代码:

.banner.customer-service {
    height: calc(70vh - 85px - 8em);
    background:url(//careers.jobvite.com/marinecreditunion/images/customerservice.jpg) center center / cover no-repeat;
}
.banner.customer-service span {
    background:rgba(0,0,0,0.5);
}
.banner.early-talent {
    height: calc(70vh - 85px - 8em);
    background:url(//careers.jobvite.com/marinecreditunion/images/earlytalent.jpg) center center / cover no-repeat;
}
.banner.early-talent span {
    background:rgba(0,0,0,0.5);
}

<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>

我有 12 个类似于 .banner.specific-class 的类。我希望做的是这样的:

.banner.* > p {} /* stuff to apply to the p tag */

我不希望将样式应用于只是 .banner 的元素；我只想将样式应用于具有 .banner 和 第二类的元素。

我的目标是仅将样式应用于具有 .banner.other-class p 而不是基础 .banner p 的元素。

有没有一种方法可以在不为 12 个类中的每一个类编写单独的 CSS 样式的情况下做到这一点？

Answer 1

您可以换种方式考虑这一点并定位所有元素，然后重置只有 banner 类存在的样式，但您需要注意类属性中的空格:

.banner {
  color:red;
}

[class="banner"] {
  color:blue;
}

<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>


<div class="banner "><p>I will be red!!!</p></div>

为避免空白问题，您可以考虑使用一些 JS 并使用 trim() 函数。这是我使用相同技巧的另一个答案:https://stackoverflow.com/a/52557233/8620333

您还可以将其与 :not() 结合使用

.banner:not([class="banner"]) {
  color:red;
}

<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>


<div class="banner "><p>I will be red!!!</p></div>