我有一个按钮。按钮的文本内部有一个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; 
}

来源

2014-05-17 scottndecker

您正在寻找的CSS attribute selector

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

编辑：

我误解了你的问题，:disabled和[disabled] w虐待一个按钮的工作。您给我的样品在Firefox中工作正常：JSFiddle

您使用的是哪种浏览器？

来源

2014-05-17 19:18:17

根据你正在迎合的浏览器，考虑阅读'normalize.css' –

另请参阅两者之间的区别http://stackoverflow.com/questions/20141450/should-i-use-css-disabled - 伪级或 - 禁用属性选择器或 - 是-i的 – BoltClock

所有浏览器（包括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>

这将为不同浏览器提供最一致的视觉效果。

来源

2014-05-17 19:52:03

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

回答

编辑：

相关问题