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

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类的样式，但您需要注意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()函数。这是我使用相同技巧的另一个答案：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而不是base .banner p的元素。

有没有办法在不为12个类中的每个类编写单独的CSS样式的情况下执行此操作？

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

.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*/
}