编辑：

Question

我有一个按钮。该按钮内部有一个span标签，用于显示按钮的文本。有时可能会禁用该按钮。禁用时，我希望按钮为灰色。为什么这不起作用吗？首先是HTML，然后是CSS

<button disabled>
    <span class="dark-disabled">Start New Game</span>
</button>

button:disabled span{
    background: #ccc;
}

但如果我改为使用类选择器，它将触发：

button:disabled .dark-disabled{
    background: #ccc;
}

Answer 1

您正在寻找CSS attribute selector

button[disabled] span{
  background: #ccc;
}

编辑：

我误解了您的问题，:disabled和[disabled]都适用于按钮。你给我的样本在Firefox中运行良好：JSFiddle

您使用的浏览器是什么？

Answer 2

所有浏览器（包括IE8及更高版本）都会自动为禁用按钮提供不同的灰色背景。只需使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <button>Start new game</button>
    <button disabled="disabled">Start new game</button>
</body>
</html>

这将在浏览器中提供最一致的视觉效果。

选择具有属性的元素的子元素

2 个答案:

编辑：