css - 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 的选择器将仅定位 ul，它们是 id 为容器的 div 的直接子级。例如，它不会针对作为第一个 li 的孩子的 ul。

出于这个原因，使用子组合器有性能优势。事实上，特别推荐在使用基于 JavaScript 的 CSS 选择器引擎时。”