将css类应用于div中的"button"

Question

我有一个包含按钮的div,如下所示,

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

一个新的属性从JS添加到这个按钮,它变成如下('disabled'属性被添加)

<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>