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的答案

Answer 2

仅当li是ul的第一个子节点时才有效，即如果脚本标签不存在。

完全。

由于您正在使用jQuery模板，并且您尝试操作第一个li以在不修改HTML源的情况下为其提供类，您可以使用jQuery完成所有操作：

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

第一个列表项的css选择器

2 个答案: