CSS Direct Decedent李

Question

在CSS中我將如何更改懸停測試1的顏色，但不是列表1,2,3的顏色？

<ul> 
    <li> 
     test 1 
     <ul> 
      <li> List 1</li> 
      <li> List 2</li> 
      <li> List 3</li> 
     </ul> 
    </li> 
</ul> 

Answer 1

的一個方法是指定的「默認」顏色：

li:hover { 
    color:#f00; 
} 
li, li:hover li { 
    color:#000; 
}​ 

http://jsfiddle.net/D8dwt/1/

另一個（作弊？）是使用多個標記來包裝你想風格上懸停的內容：

li:hover span { 
    color:#f00; 
}​ 

<ul> 
    <li> 
     <span>test 1</span> 
     <ul> 
      <li> List 1</li> 
      <li> List 2</li> 
      <li> List 3</li> 
     </ul> 
    </li> 
</ul>​ 

Answer 2

這是一條路可走：

ul > li { 
    color: red; 
} 

ul > li:hover { 
    color: blue; 
} 

ul > li:hover > ul > li { 
    color: red; 
} 

Answer 3

添加test1成div元素，使其在一個單獨的一頁。

CSS：

div:hover { 
    color: blue; 
} 

雖然可能有辦法做到這一點不modifiying的HTML ..

Answer 4

給它自己的類，並在你的CSS文件中定義它。

<li class="yourclass"> 

或者把它標記，並定義鏈接在你的CSS

li.yourclass a:hover { 
    text-decoration: underline ; 
}