버튼이 있습니다. 버튼에는 단추의 텍스트 용 스팬 태그가 있습니다. 때로는 버튼이 비활성화 될 수 있습니다. 사용 중지되면 버튼이 회색으로 표시됩니다. 왜 이 작동하지 않습니까? 먼저 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]). 버튼에 대한 아픈 일. 저에게 준 샘플은 Firefox에서 잘 작동합니다 : JSFiddle

어떤 브라우저를 사용하고 있습니까?

출처

2014-05-17 19:18:17

귀하가 취향에 맞는 브라우저에 따라 'normalize.css'를 읽어보십시오. –

두 가지의 차이점을 참조하십시오. http://stackoverflow.com/questions/20141450/should-i-use-css-disabled -pseudo-class-or-disabled-attribute-selector-or-is-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

속성이있는 요소의 하위 요소 선택

답변

편집 :

관련 문제