Question

如果元素标题有或没有带有类find的子元素，我尝试应用不同的CSS。是否可以只使用CSS？

案例1：

 <h2 class="title">
    <span class="ico"></span>
    <span class="find">Find</span>
</h2>

.title {
    padding-left: 4px;
}

案例2：

 <h2 class="title">
    <span class="ico"></span>
    Find
</h2>

.title {
    padding-left: 9px;
}

Answer 1

您应该按照以下方式将样式应用于元素或类。有一个父类.title 现在标题已嵌套2个类.ico是强制性的，.find是可选的。

因此，当您想要使用嵌套元素应用CSS时，您应该使用以下方式.parent .child，例如。 .title .find

我已使用.title定义了默认样式。只要.find不存在，它就会继承父类的样式。在我们的例子中，我将默认样式设置为font-size:15px

在样式表中，您似乎使用了.title .find，它将应用样式表中声明的样式，其中父项为.title，它将适用于所有具有.find类的子项。在我们的例子中，我将默认样式设置为font-size:22px

＆＃13;

*{
font-family: "Arial";
}

.title{
  font-size:15px;
}

.title .find{
    font-size:22px;
}

＆＃13;

<h2 class="title">
    <span class="ico"></span>
    <span class="find">Find</span>
</h2>

<h2 class="title">
    <span class="ico"></span>
     Find
</h2>

＆＃13;

希望，了解这个概念并解决您的问题可能有所帮助。

如果第二个孩子有某个班级，则不同的CSS风格

1 个答案: