将css类应用于＆＃34;按钮＆＃34;里面的div

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>

Answer 2

您可以使用CSS3选择器：已禁用

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

<强> DEMO HERE

Answer 3

用这个

替换你的风格

#parentDiv button:disabled
{
    color:#F00;
}

Answer 4

使用属性选择器[attr]

#parentDiv button[disabled] {color: #aaa}

http://jsfiddle.net/f10vfagq/

Answer 5

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