我试图根据他们的祖先（不是父母，尤其是）的一些按钮的主题，所以.我有以下HTML结构
<body class="theme-a">
<section class="container">
<form class="theme-b">
<div class="button-group">
<button type="button">Button B1</button>
<button type="button">Button B2</button>
</div>
<div class="button-group">
<button type="button">Button B3</button>
<button type="button">Button B4</button>
</div>
</form>
<form>
<div class="button-group">
<button type="button">Button A1</button>
<button type="button">Button A2</button>
</div>
<div class="button-group">
<button type="button">Button A3</button>
<button type="button">Button A4</button>
</div>
</form>
</section>
</body>字符串
如您所见，有两个主题.theme-a和.theme-b
CSS代码看起来像这样：
.theme-a {
background: #999;
}
.theme-b {
background: #555;
}
.theme-a button {
background: #222;
}
.theme-b button {
background: #69C;
}型
问题是：如果切换主题类（A与B，B与A），您会注意到A主题上的按钮（与主题类有较近的祖先，保持远祖先的样式，蓝色背景而不是黑色背景）。
我怎样才能实现一个适当的特异性，根据最接近的祖先设置按钮属性？
以下是来自JSfiddle的链接：http://jsfiddle.net/XVaQT/1/
我希望我解释得很清楚：）
谢啦，谢啦
2条答案
按热度按时间6kkfgxo01#
谢天谢地，使用CSS，你可以合并多个选择器来为许多元素指定相同的样式，我用一个工作示例更新了你的jsfiddle，只需更改类
theme-a和theme-b，就像你在问题中所说的那样，看看它的工作情况：http://jsfiddle.net/cchana/XVaQT/3/我所做的就是在你刚刚寻找
button的地方添加第二个选择器，它是类theme-a的元素的后代：字符串
它现在还查找
button，它是类theme-b的元素的后代，而theme-b本身又是类theme-a的元素的后代：型
不需要在
background值中添加!important，因为它会覆盖为.theme-b button定义的样式，因为这个选择器更具体。v09wglhw2#
下面是一个使用
:has的2023解决方案，它基于最接近的祖先上的.theme-*类对按钮进行样式化，并允许在祖先上无限嵌套.theme-*类。字符串
选择器说：“给予我所有的
.theme-a元素，但不要包含嵌套theme-*类的元素。”（具体来说，不要包含子元素的class属性包含theme-的元素。）