html - 将 css 类应用于 div 内的 "button"

Question

我有一个包含如下按钮的 div，

<div id="parentDiv">
    <button id="myBtn" class="myclass">ADD ME</button>
</div>

从 JS 向此按钮添加了一个新属性，它变成如下所示(添加了“禁用”属性)

<div id="parentDiv">
    <button id="myBtn" class="myclass" disabled="disabled">ADD ME</button>
</div>

我正在尝试为禁用按钮应用下面的 CSS 类，

#parentDiv button.disabled {
    color: #AAAAAA;
}

但令我惊讶的是，这个类并没有应用到按钮上。请指出正确的方向。

Answer 1

需要添加属性选择器

#parentDiv button[disabled="disabled"] 
{
    color:red;
}

或者只是

#parentDiv button[disabled] 
{
    color:red;
}

#parentDiv button[disabled="disabled"] {
  color: red;
}

<div id="parentDiv">
  <button id="myBtn" class="myclass" disabled="disabled">ADD ME</button>
</div>