如何 select 具有共享基础 class 和附加 class 的元素的子元素？

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 个 class 与 .banner.specific-class 相似。我希望做的是这样的：

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

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

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

的元素

有没有办法在不为 12 个 class 中的每一个编写单独的 CSS 样式的情况下做到这一点？

Answer 1

如果您的段落不一定是直接子段落，您可以使用 .banner > p {} 或 .banner p {}。

编辑

My goal is to apply styling ONLY to elements that have .banner.other-class p and not the base .banner p.

Is there a way to do this without writing individual CSS styles for each of the 12 classes?

您可以为自定义 class 定义规则，如下所示：

.banner.my-custom-class p {
    /*Your rules*/
}

然后您可以确保将 class 添加到横幅中。另一种可能性是创建一个不应应用的 class，例如：

.banner:not(.my-other-custom-class) p {
    /*Your rules*/
}

然后您可以将此 class 添加到您不希望应用样式的标签中。如果您需要进一步的定制，您可以考虑通过 Javascript 进行定制，或者向我们提供有关您的 class 的更多信息。当然，最简单的就是为每个不同的classes创建规则，比如

.banner.myclass1 p, .banner.myclass2 p, banner.myclass3 p {
    /*Your rules*/
}

Answer 2

如果所有额外的 12 个 class 都有一个连字符，您可以将 wildcard attribute selector 应用到 .banner class 来定位它们，如下所示：

.banner[class*="-"] p

演示：

.banner[class*="-"] p {
    color: red;
}

<div class="banner"><p>Unstyled Header</p></div>
<div class="banner customer-service"><p>Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner early-talent"><p>Other Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner other-class"><p>Another Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner another-class"><p>One More Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>

您也可以使用 .banner[class*=" "] p，但这在技术上会 "fail" 并适用于您有 class="banner " 的任何情况（例如初始 banner class 后跟一个空格） ...如果您可能通过 JavaScript 或 PHP 或其他方式动态添加或删除 classes。

如果 12 个 class 之间没有共享字符，您可能需要使用 JavaScript 到 select 它们，或者将第三个 class 应用到至少有 .banner 和另一个 class 的元素，只有 select class。重新整理 HTML 可能是这里最好的解决方案，这样您就可以保持 CSS 简单。

Answer 3

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

.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() 函数。这是我使用相同技巧的另一个答案：

您也可以将其与 :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>

如何 select 具有共享基础 class 和附加 class 的元素的子元素？

How to select children of elements with a shared base class and an additional class?

html

css

css-selectors

pseudo-class