CSS选择第一个列表项(css selector for first list item)

我有以下的HTML结构。

<ul>
  <script id="agendaTmpl" type="text/x-jquery-tmpl">
               <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');">

                </li>
    </script>
 <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"> test</li>
 <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"> test</li>
</ul>

我需要应用类列表中的第一个里。 该脚本标签不能被删除，怎么把它是结构的模板。 我试图与ul > li:first-child ，但它无法正常工作。 它的工作原理只有在李是UL的第一个孩子，也就是说，如果脚本标签不存在。

请给我建议的方式来应用样式的UL的第一华里。

注：我不允许一个新的类添加到第一华里。

Answer 1:

尝试使用first-of-type ，而不是：

ul > li:first-of-type

这是一个CSS3选择器 - 所以没有完全跨越旧的浏览器支持。 见@ Boltclock的答案更好的跨浏览器支持

Answer 2:

它的工作原理只有在李是UL的第一个孩子，也就是说，如果脚本标签不存在。

究竟。

由于您使用jQuery的模板，你试图操纵第一li给它一个类，而无需修改HTML源代码，你不妨做这一切与jQuery：

$('ul > li:first').addClass('first');

文章来源: css selector for first list item