Question

我正在尝试根据他们的祖先（不是父母，特别是）来设置一些按钮，所以...我有以下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/

我希望我能以清楚的方式解释：）

由于

Answer 1

很好，使用CSS你可以组合多个选择器来为很多元素指定相同的样式，我用一个工作示例更新你的jsfiddle，只需更改类theme-a和theme-b，如你所说在你的问题中，看到它有效：http://jsfiddle.net/cchana/XVaQT/3/

我所做的就是添加第二个选择器，您只需要查找button，它是类theme-a的元素的后代：

.theme-a button {
    background: #222;
}

它现在还查找button，它是具有类theme-b的元素的后代，该类本身是具有类theme-a的元素的后代：

.theme-a button,
.theme-a .theme-b button {
    background: #222;
}

不需要在!important值中添加background，因为它会覆盖为.theme-b button定义的样式，这要归功于此选择器更具体。

CSS特异性和/或与祖先的继承

1 个答案: