Question

我在另一个div里面有一个div。父项具有特定的类名，该类名没有明确地应用任何css。子元素有css应用于它，特别是它的背景颜色。所以它看起来像这样......

<div id='myparent' class='someclass'>
    <div id='mychild' class='somebgcolor'></div>
</div>

我想要做的是在更改父div的类时更改子div的背景颜色。所以我用这个javascript来改变父类......

document.getElementById('myparent').className = 'someotherclass';

和我的css ......

.someclass .somebgcolor {
    background-color: #369;
}
.someotherclass .somebgcolor {
    background-color: #401;
}

但它不起作用。对于初学者，甚至不应用初始背景颜色，并且在更新父div的类时不应用背景颜色。我是否遗漏了将css应用于嵌套元素的基本方法？

Answer 1

我认为你没有遗漏任何东西。我只是试了一下，它工作正常：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .someOtherClass {
        background-color: yellow;
    }

    .someOtherClass .someBgColor {
        background-color: red;
    }
    </style>
</head>
<body>
    <div id="myParent" class="someClass">
        <div id='myChild' class="someBgColor">
            asdasadasd
        </div>
    </div>

    <script>
        var parent = document.getElementById('myParent');
        parent.className = "someOtherClass";
    </script>
</body>
</html>

在更改父类时更改子项的css属性

1 个答案: