css選擇器預嵌套列表項

Question

<ul class="someclass"> 
     <li> 
      <a>something arbitrary here</a><!--this is what I am trying to capture--> 
      <ul> 
       <li><a>list elemnts here</a></li> 
       <li><a>list elemnts here</a></li> 
       <li><a>list elemnts here</a></li> 
       <li><a>list elemnts here</a></li> 
      </ul> 
     </li> 
     <li> 
      <a>something arbitrary here</a><!--this is what I am trying to capture--> 
      <ul> 
       <li><a>list elemnts here</a></li> 
       <li><a>list elemnts here</a></li> 
       <li><a>list elemnts here</a></li> 
       <li><a>list elemnts here</a></li> 
      </ul> 
     </li> 
    </ul> 

我想用CSS來「提取」標記的第一個列表項。我應該使用哪個css選擇器？提前致謝！

Answer 1

使用>選擇直接子元素：http://jsfiddle.net/v25s5/

.someclass > li > a { 
    color: red; 
} 

Answer 2

點擊以下鏈接瞭解更多關於CSS選擇器： https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

「8. X> Y

div#container > ul { 

border: 1px solid black; 

} 

的標準XY和X> Y之間的區別在於後者只會選擇直接的孩子，例如考慮以下標記。

<div id="container"> 
    <ul> 
     <li> List Item 
     <ul> 
      <li> Child </li> 
     </ul> 
     </li> 
     <li> List Item </li> 
     <li> List Item </li> 
     <li> List Item </li> 
    </ul> 
</div> 

#container> ul的選擇器只會將div的直接子對象的id作爲容器標識。例如，它不會以第一個孩子的孩子爲目標。

因此，使用子組合器會帶來性能優勢。實際上，當使用基於JavaScript的CSS選擇器引擎時，尤其推薦它。「