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

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>

Answer 2

如果所有其他 12 个类都有连字符，则可以将 wildcard attribute selector 应用于 .banner 类来定位它们，如下所示：

.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，但这在技术上会“失败”并适用于您拥有class="banner " 的任何情况（例如，最初的banner 类后跟一个空格）...以防万一通过 JavaScript 或 PHP 等动态添加或删除类。

如果这 12 个类之间没有共享字符，您可能需要使用 JavaScript 来选择它们，或者将第三个类应用于至少具有 .banner 和另一个类的元素，然后仅按该类进行选择。重新修饰 HTML 可能是这里最好的解决方案，这样您就可以保持 CSS 简单。

Answer 3

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

编辑

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

有没有办法做到这一点，而无需编写单独的 CSS 样式 12 个班级中的每一个？

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

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

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

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

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

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