Question

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>title</title>
</head>
<body>
    <div class="level1">
        <div class="level2">
            <div class="level3"></div>
            <div>
                <div class="level4"></div>
            </div>
        </div>
    </div>
    <div class="level4"></div>
</body>
</html>

CSS：

.level1 .level4 {
    width: 90px
}

.level4 {
    width:50px
}

我只想更改level4，如果它是level1下的任何子节点，只要它是level1的子节点就会有多深。如果某个特定类在另一个类下面的某个地方，如何更改？这可能吗？

Answer 1

你应该已经拥有它。

.level1 .level4 { ... }仅适用于父母class="level4"出现时的class="level1"。仅.level4始终适用于class="level4"。

编辑：没有意识到，但你的CSS顺序错误。 CSS按顺序加载，因此width: 50会覆盖width: 90。

Answer 2

在你的html中注意到你将.level4包装在另一个div中

<div>
    <div class="level4"></div>
</div>

这使.level4的div父级和.level4的.evel1的父级。因此，在类.level1中设置样式.level4将是

.level1 div .level4 {
    Width: 90px;
 }

或者您也可以删除空div并且只有

<div class="level1">
    <!-- other diva-->
    <div class="level4"></div>
</div>

然后使用

.level1 .level4 {
    Your style
}

或者，如果你不在其他任何地方使用该课程，你也可以只设置风格.level4

希望你了解这是如何运作的

如何只用css更改子类？

2 个答案: