Chr*_*s X 5 css inheritance css-specificity
我正在尝试根据它们的祖先（特别是不是父母）对一些按钮进行主题化，所以......我有以下 HTML 结构
\n\n<body class="theme-a">\n <section class="container">\n <form class="theme-b">\n <div class="button-group">\n <button type="button">Button B1</button>\n <button type="button">Button B2</button>\n </div>\n <div class="button-group">\n <button type="button">Button B3</button>\n <button type="button">Button B4</button>\n </div>\n </form>\n <form>\n <div class="button-group">\n <button type="button">Button A1</button>\n <button type="button">Button A2</button>\n </div>\n <div class="button-group">\n <button type="button">Button A3</button>\n <button type="button">Button A4</button>\n </div>\n </form>\n </section>\n</body>\n嗯，正如你所看到的，有两个.theme-a主题.theme-b
CSS 代码如下：
\n\n.theme-a {\n background: #999;\n}\n.theme-b {\n background: #555;\n}\n.theme-a button {\n background: #222;\n}\n.theme-b button {\n background: #69C;\n}\n问题是：如果您切换主题类（A 与 B，B 与 A），您会注意到 A 主题上的按钮（与主题类有更近的祖先，保留了远祖先的样式，蓝色背景而不是黑色背景）。
\n\n如何根据最接近的祖先设置按钮属性来实现适当的特异性？
\n\n这是 JSfiddle 的链接： http: //jsfiddle.net/XVaQT/1/
\n\n我希望我能清楚地解释:)
\n\n谢谢\n\xe2\x80\x8b
\n值得庆幸的是，使用CSS，您可以组合多个选择器来为许多元素指定相同的样式，我用一个工作示例更新了您的jsfiddle，只需更改类theme-a和theme-b，正如您在问题中所说，即可看到它的工作原理：http:// jsfiddle.net/cchana/XVaQT/3/
我所做的就是添加第二个选择器，您只是在其中寻找button具有该类的元素的后代theme-a：
.theme-a button {
background: #222;
}
现在，它还查找 a button，它是具有该类的元素的后代，该类theme-b本身也是具有该类的元素的后代theme-a：
.theme-a button,
.theme-a .theme-b button {
background: #222;
}
不需要!important向您的值添加 a ，因为由于此选择器更加具体，background它将覆盖定义的样式。.theme-b button