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 ; 
}