第一个列表项的css选择器

Question

我有以下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>

我需要将类应用于列表的第一个li.无法删除脚本标记,因为它是结构的模板.我试过ul > li:first-child但它不起作用.仅当li是ul的第一个子节点时才有效,即如果脚本标签不存在.

请建议我一种方式将样式应用于ul的第一个li.

注意:我不允许在第一个li中添加新类.

Answer 1

请尝试使用first-of-type:

ul > li:first-of-type

这是一个CSS3选择器 - 因此在旧浏览器中并不完全支持.有关更好的跨浏览器支持,请参阅@ Boltclock的答案