동일한 속성이지만 다른 값을 가진 다른 CSS 클래스

Question

배경색 속성을 보유하는 2 개의 CSS 클래스가 있습니다. 한 클래스는 일반 요소 용이고 다른 클래스는 선택된 요소 용입니다. 내 모델에있는 데이터에 따라 selected_element 클래스를 요소에 배치했습니다. 이

.selected_obj { 
    background-color: #00EE76 
} 

.general_obj{ 
    /* Othe CSS Properties */ 
    background-color: #d9d9d9; 
} 

내 JSP입니다 : 내가 생성 된 HTML을 볼 때

<c:forEach items="${myModel.myCollection}" var="obj"> 
     <c:choose> 
      <c:when test="${obj.id == myModel.selectedObj.id}"> 
       <div class="selected_obj general_obj"> 
        <span>${obj.name}</span> 
       </div> 
      </c:when> 
      <c:otherwise> 
       <div class="general_obj"> 
        <span>${obj.name}</span> 
       </div> 
      </c:otherwise> 
     </c:choose> 
    </c:forEach> 

, 난 올바른 요소에 selected_obj 클래스를 볼 수는 있지만 값이 backgroung에 의해 오버라이드 (override)되어 이것은 CSS입니다 general_obj 클래스의 -color 속성 값입니다. 브로우저가 올바른 값을 선택하는 방법과이를 극복 할 수있는 방법은 무엇입니까?

Answer 1

동일한 특이성을 가진 두 개의 상충되는 규칙이 적용될 경우 후자가 적용됩니다.) 귀하의 경우에는 .general_obj 배경색 규칙이 적용됩니다 (= 실제로 적용됩니다). CSS 파일의 .specific_obj 규칙을 따르기 때문입니다.

- HTML의 변경은 두 클래스가 여전히 동일한 특이성을 가지므로 문제를 해결하기 위해 아무 것도하지 않습니다. 이 문제를 해결하기 위해

한 가지 확실한 방법은 !important을 사용하고 있습니다 : !important로 지정된 스타일 (일반 CSS 계단식 규칙에 따라) 다르게 적용 할 스타일을 재정의합니다

.selected_obj { 
    background-color: #00EE76 !important; 
} 

...로.

그게 빠른 픽스로 잘되지만 사실은 강력히 추천합니다 (그 이유는 this article에 잘 설명되어 있으며 CSS 트릭에도 해당 항목에 a mighty word이 있습니다).

(강력 추천)

.selected_obj, .selected_obj.generic_obj { background-color: #00EE76; }는 CSS 파일을 수정 :

대신 당신은

• 이 같은 이러한 경우에 대한 특정 멀티 클래스 규칙을 만들 ... 중 하나를 할 수있다 그래서 일반 클래스에 대한 규칙이 먼저 설명되고 특정 클래스에 대한 규칙이 그 뒤에옵니다.

실은 엄밀히 말하면 모든 일반적인 것들을 다룬 다음 전문으로 작업하십시오.)

Answer 2

당신이 시도 할 수 :

.selected_obj { 
    background-color: #00EE76 !important; 
} 

? 끝에는 세미콜론 (;)도 표시됩니다. 누락 된 세미콜론은 오류를 생성 할 수 있습니다.