更改父类时更改子的css属性答案

【问题标题】：change css attributes of child when parent class is changed更改父类时更改子的css属性
【发布时间】：2015-03-25 22:30:04
【问题描述】：

我在另一个 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 应用于嵌套元素的基本原理？

【问题讨论】：

它似乎对我有用。您在浏览器控制台中收到什么样的错误消息？
jsfiddle.net/u2s9dg4L/1

标签： javascript html css

【解决方案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>

【讨论】：

嗯，我的错。我刚刚实现了同样的事情，但方式略有不同，但功能与问题相同，现在似乎工作正常。我不确定为什么它以前不起作用，可能是我的代码中有语法错误。将为您的努力 +1 并标记正确。谢谢！