html - 为什么 CSS 覆盖不适用于嵌套按钮？

Question

我有如下所示的 HTML 和 CSS(参见 http://jsfiddle.net/shyamh/zfwkt/ 处的 fiddle )

<div class="tk-toolbar">
  <button class="tk-button-overrides" type="button">
        <span>one button</span>
  </button>
  <div class="foo">
    <div class="bar">
    <button type="button">
        <span>another button</span>
    </button>
    <button type="button">
        <span>third button</span>
    </button>
    </div>
  </div>
</div>

和

.tk-toolbar {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #efefef;
}
.tk-toolbar div {
  display: inline-block;
  color: black;
}
.tk-toolbar button[type=button] {
  border: none;
  border-radius: 2px;
  height: 40px;
  padding: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #fff2f2;
  padding-right: 10px;
  padding-left: 10px;
}
.tk-toolbar button:hover {
  background-color: #e1e1e1;
}
.tk-toolbar button:focus {
  outline: 0;
}
/* I also tried
   .tk-toolbar .tk-button-overrides
   .tk-toolbar button[type=button] .tk-button-overrides
 *  
 */
.tk-button-overrides  {
    padding-right: 100px;
    background-color: red;
}

我尝试用 tk-button-no-label 应用的覆盖被覆盖了。我怎样才能让它真正发挥作用？

谢谢

Answer 1

这是由于 CSS Specificity . .tk-toolbar button[type=button] 的特异性是 0,0,2,1 而 .tk-toolbar 的特异性是 .tk-button -no-label 是 0,0,2,0，因此前者会覆盖后者。通过添加 button[type=button]，我们使其更加具体，即 0,0,3,1。

.tk-toolbar button[type=button].tk-button-no-label  {
    padding-right: 100px;
    background-color: red;
}

Updated Fiddle