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

Posted 2023-03-06

【中文标题】如果第二个孩子有某个班级，则不同的CSS样式[重复]

【英文标题】：Different css style if second child has a certain class [duplicate]

【发布时间】：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 请查看我试图在我的答案中解释这个概念的答案。

【参考方案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>

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