我想为我的孩子课添加css

Question

如何将CSS添加到子元素的子元素中，我尝试了这段代码

.inactive-property {
    background-color: #e85050;
    color: white!important;
}

.inactive-property > .mng-prop-span{
    color: white!important;
}

我的DOM元素如

<div class="inactive-property">
    <div class="a">
        <div class="aa">
            <div class="mng-prop-span"></div>
        </div>
    </div>
    <div class="b"></div>
</div>

我想在课程mng-prop-span

上应用css

Answer 1

作为mng-prop-span类成员的元素不是inactive-property成员元素的子。这是一个曾孙子。

使用descendant combinator（空格：）而不是child combinator（>）。

Answer 2

    .inactive-property > .mng-prop-span{
    color: white!important;
}

第一行不正确。 >用于快速下一个孩子。最好不要使用>

进行尝试

Answer 3

你可以像这样做

.inactive-property .mng-prop-span{
    color: white;
}

它将匹配.mng-prop-span类中的.inacvite-property类 您不必在这里使用重要的财产。

如果您想匹配only那些child of "aa" element inside "inactive-property"的元素，您可以这样做

.inactive-property .aa > .mng-prop-span{
    color: white;
}

Answer 4

点击此处 jsfiddle

代码：

.inactive-property {
background-color: #e85050;
color: white;
height:100px;
width:100px;
}

.inactive-property  .mng-prop-span{
color: black;
}

1. .mng-prop-span它不是.inactive-property的直接孩子，但它是后代，而不是>使用.inactive-property .mng-prop-span{一个简单的空间两者之间

2. >是一个子选择器，用于选择父

下直接的子项

1. 我建议您只有在绝对必要时才使用!important

2. 了解更多信息，请点击此处 CSS Selectors

编辑：你能解释一下downvote吗？ （投票的人）。我很好奇