如果第二个孩子有某个班级，则不同的CSS样式[重复]答案

【问题标题】：Different css style if second child has a certain class [duplicate]如果第二个孩子有某个班级，则不同的CSS样式[重复]
【发布时间】：2018-09-26 00:49:35
【问题描述】：

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

案例一：

 <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;
}

【问题讨论】：

不，在第一种情况下，您应该在第二种情况下定位 .find 和 .title。
线索就在名字里：级联
@GtAntoine 请查看我试图在我的答案中解释这个概念的答案。

标签： css

【解决方案1】：

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

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

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

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

*{
font-family: "Arial";
}

.title{
  font-size:15px;
}

.title .find{
    font-size:22px;
}

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

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

希望，这可能有助于理解这个概念并解决您的问题。

【讨论】：