CSS 스타일 전용 "this"요소

Question

나는 위에 올려 놓았을 때 강조해야하는 항목이있는 목록을 가지고 있습니다. 내가있어이 잘 아래와 같이 작업 :

li.test:hover 
{ 
    text-decoration: underline 
} 

그러나,이 목록의 항목이 다른 목록을 포함하고, 될 자식 목록에있는 모든 목록 항목뿐만 아니라 밑줄 위의 CSS 규칙을 사용. 첫 번째 li (실제로 위에 얹혀있는 것) 만 밑줄을 긋고 싶습니다. 나는 자식 선택자를 사용하려고 시도했으나 효과가있는 항목을 찾지 못했습니다 (실제로는 분명하지만).

어떻게 스타일을 현재 요소에만 적용 할 수 있습니까?

Jsfiddle : http://jsfiddle.net/Mansfield/2CtFW/

Answer 1

당신은 그것을 부정 행위를하지만, 내부리스트가에 포함되지 않기 때문에이 계단식 규칙을 방지 http://jsfiddle.net/2CtFW/7/

아이 바꿈되지 않는 다른 노드에 텍스트 내용을 포장 할 수 있습니다 text-decoration 규칙을받는 요소 처음에는 이것이 해킹이라고 생각했지만 텍스트 요소의 스타일을 지정할 수 없다는 사실을 고려할 때이 경우 실제로 수행하려는 작업인데 이것이 원하는 것을 성취 할 수있는 유일한 방법이라고 생각합니다.

<ul> 
    <li> 
     <span>Item1</span> 
     <ul> 
      <li><span>Item2</span></li> 
     </ul> 
    </li> 
<ul> 


li>span:hover 
{ 
    text-decoration: underline 
}