4

我有以下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 中添加新类。

4

3 回答 3

11

尝试first-of-type改用：

ul > li:first-of-type

这是一个 CSS3 选择器 - 因此不完全支持旧版浏览器。请参阅@Boltclock 的答案以获得更好的跨浏览器支持

于 2012-05-14T09:11:34.977 回答
2

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

确切地。

由于您使用的是 jQuery 模板，并且您试图在li不修改 HTML 源代码的情况下操作第一个给它一个类，所以您也可以使用 jQuery 来完成这一切：

$('ul > li:first').addClass('first');
于 2012-05-14T09:11:33.043 回答
0

还有一个技巧可以选择相邻项目列表的所有第一项：

li:not(li + li) {
  background: #f00;
}

/* Or the more intuitive one: */
ul > :not(li) + li, ul > li:first-child {
  background: #f00;
}
<ul>
 <div></div>

 <li>I'm selected</li>
 <li>test</li>
 <li>test</li>

 <div></div>

 <li>I'm selected</li>
 <li>test</li>
</ul>

于 2022-01-20T02:09:40.613 回答