클래스를 통해 자동으로 적용되는 요소의 스타일을 우회하는 방법은 무엇입니까?

Question

나는 모든 li 안에 span 요소가있는 ul-li 목록을 가지고있다. 내부에 특정 범위 요소 지금

.detail_div ul li span{ 
//some styles 
} 

말하자면 마지막 리 :
현재 [그렇게 말할 모든 리튬 내측 스팬 요소 나] 등이 스팬 소자에인가되는 CSS 클래스가 , 나는 위의 (기본) CSS 클래스를 무시하고 다른 스타일을주고 싶다.
어떻게해야합니까?

도와주세요.
감사합니다.

Answer 1

.detail_div ul li span { 
    // Some Styles 
} 
.detail_div ul li:last-child span { 
    // UNDO above styles 
} 

두 번째 정의는 마지막 li과 일치합니다.

편집 : 또는 당신은 당신이 새로운 클래스를 unstyle 할 목록 항목을 지정할 수 있습니다

<ul> 
    <li><span>Styled</span></li> 
    <li class="unstyled"><span>Unstyled</span></li> 
    <li><span>Styled</span></li> 
</ul> 

CSS :

.detail_div ul li span { 
    // some styles 
} 
.detail_div ul li.unstyled span { 
    // undo above styles 
} 

또는 당신이 nth-child pseudoclass를 사용할 수 있습니다.

Answer 2

스타일을 다시 선언하면 작동하지 않습니다. 예 :

.detail_div ul li span{ 
    color: red; 
} 

그런 다음 스타일 뒤에 !important을 넣습니다. 예 :

.detail_div ul li span{ 
    color: red !important; 
} 

마지막 항목은 :last-child입니다. 예 :

.detail_div ul li:last-child span{ 
    color: red !important; 
} 

중간에 뭔가가있는 경우 :nth-child(number)을 사용하십시오. 예 : 초 LI :

.detail_div ul li:nth-child(2) span{ 
    color: red !important; 
}