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＆gt; Y

div#container > ul {

border: 1px solid black;

}

标准X Y和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＆gt;的选择器ul将仅定位具有id容器的div的直接子节点的uls。例如，它不会针对第一个孩子的ul。

因此，使用儿童组合器有性能优势。事实上，特别推荐使用基于JavaScript的CSS选择器引擎。“

css选择器预嵌套列表项

2 个答案: