CSS 스타일 우선 순위

Question

다음과 같은 HTML이 :

1. 는 "tabs__item_with_new_orders"에서 "tabs_item"CSS 속성을
2. 설정 배경 속성을 설정하려면 :

   <li class="tabs__item tabs__item_with_new_orders">123</li> 
   

   나는 다음과 같은 것들을하고 싶지는 CSS 클래스

방화범은이 클래스가 성공적으로 적용되었음을 보여줍니다.

.tabs__item:nth-child(4n+2) { 
    background: none repeat scroll 0 0 #89c4bb; 
} 

내 수업은 방화범이났습니다! 그리고 "tabs__item_with_new_orders"의 배경 속성은 적용되지 않습니다. 어떻게 해결할 수 있습니까? 우선 "! important"속성을 사용하여 우선 순위를 설정할 수 있지만 그렇게하고 싶지는 않습니다.

Answer 1

사용

.tabs__item:nth-child(4n+2) { 
    background: none repeat scroll 0 0 #89c4bb; 
} 

.tabs__item.tabs__item_with_new_orders { 
    background: #000; 
} 

가 오버라이드 (override)됩니다 때문에 배경이 검은 색으로한다 이런 식으로.

Answer 2

클래스 및 ID에 avoidcoore를 피하십시오. 왜

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Underscores_in_class_and_ID_Names