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选择器引擎时，尤其推荐它。“