css选择器预嵌套列表项

时间:2013-03-02 13:41:33

标签: css css-selectors

    <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选择器?提前谢谢!

2 个答案:

答案 0 :(得分:0)

使用>选择直接子元素:http://jsfiddle.net/v25s5/

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

答案 1 :(得分:0)

点击此链接可了解有关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选择器引擎。“