第一个列表项的 css 选择器

Posted 2023-03-06

【中文标题】第一个列表项的 css 选择器

【英文标题】：css selector for first list item

【发布时间】：2012-05-21 18:18:20

【问题描述】：

我有以下 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 的第一个孩子时才有效，即如果 script 标签不存在。

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

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

【问题讨论】：

"无法删除脚本标签" 是的，它可以，是的，它应该。您拥有的是无效的 html。

@Raghav ，您是否希望突出显示选定的列表项

@RepWhoringPeeHaa ：我知道它可以从技术上删除。但不允许。而且我不在乎它是否是有效的 html，因为它是由某个插件生成的，我不想破坏任何现有代码。 @freebird：是的。我需要将角应用于第一个 li。第一类似乎对我有用。

@Raghav 如果不允许您将其删除，则说明您的组织内部存在问题。如果这是由插件添加的，则该插件会浪费大量时间，应不惜一切代价避免使用。

【参考方案1】：

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

没错。

由于您使用的是 jQuery 模板，并且您正在尝试操作第一个 li 以在不修改 HTML 源代码的情况下为其提供类，因此您不妨使用 jQuery 来完成这一切：

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

【参考方案2】：

尝试改用first-of-type：

ul > li:first-of-type

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

【讨论】：

浏览器支持问题特别要注意，因为jQuery不支持:first-of-type。

使用 jquery 这对我很有效 $("ul > li:first-of-type") 。但是由于我是通过 css 使用它的，所以如果上述中断也没关系。

你是对的。它在 IE 中不起作用。不过还好。我们只针对由 html5 呈现的移动浏览器。

【参考方案3】：

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

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>