다른 CSS 속성 값의 우선 순위

Question

"state-normal", "state-focus"및 "state-hover"의 3 가지 클래스가 있습니다. 모두 동일한 속성 (배경, 테두리, ...)을 사용하지만 속성의 값은 다릅니다.
버튼이 "상태 - 초점"을 얻는다면, "상태 - 정상"클래스를 제거하고 싶지 않습니다.
버튼이 "상태 초점"이고 "상태 호버"를 얻는 경우 "상태 초점"클래스 을 제거하고 싶지 않습니다.

"Accept-Language: da, en-gb;q=0.8, en;q=0.7" 

CSS도 동일한 작업을 수행하는 것이 좋은 것입니다 : 당신이 언어에 대한 "품질"/ 우선 순위를 부여 할 수있는 브라우저 언어 사양에서

.state-normal { background-color: #aaaaaa;q=0.5 } 
.state-focus { background-color: #bbbbbb;q=0.7 } 
.state-hover { background-color: #eeeeee;q=0.9 } 

나는 알고있다 CSS에는 아무것도 없다.

그러나 jQuery UI에서는 요소에 "ui-state-focus"를 할당 할 때 "ui-state-default"를 제거하지 않기 때문에 이러한 종류가 있습니다. 그들은 그걸 어떻게 햇어?

트릭으로 구현하려면 (WITHOUT! 중요) 다른 방법이 있습니까?

미리 감사드립니다.

Answer 1

CSS를 사용하여이를 수행 할 수 있습니다.

.state-normal { background-color: #aaaaaa;q=0.5 } 
.state-normal.state-focus { background-color: #bbbbbb;q=0.7 } 
.state-focus.state-hover { background-color: #eeeeee;q=0.9 } 

그러나 이것은 규칙에 언급 된 모든 클래스가 존재 함을 의미합니다. 즉, 요소는 두 클래스가 모두 존재 함을 의미합니다. 따라서 클래스 state-focus의 요소에는 규칙에 따라 배경색이 설정되지 않습니다. 당신이를 피하려면

, 당신은 대신이 작업을 수행 할 수 있습니다

.state-normal { background-color: #aaaaaa;q=0.5 } 
.state-focus, .state-normal.state-focus { background-color: #bbbbbb;q=0.7 } 
.state-hover, .state-focus.state-hover { background-color: #eeeeee;q=0.9 } 

---

편집 : OP의 요청에 따라

CSS Specificity

CSS Selectors - MDN

Similar answer