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

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

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

是否有一种方法可以不为12个类中的每一个编写单独的CSS样式？

Answer 1

如果您的段落不一定是直接子代，则可以使用.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*/
}

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类的样式，但您需要在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>

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

3 个答案: