CSS 伪类选择器：first - 它是啥？我在示例代码中找到并且找不到关于它的文档

Posted 2023-03-05

【中文标题】CSS 伪类选择器：first - 它是啥？我在示例代码中找到并且找不到关于它的文档

【英文标题】：CSS pseudo class selector :first - What is it? I found in sample code and can't find documentation on itCSS 伪类选择器：first - 它是什么？我在示例代码中找到并且找不到关于它的文档

【发布时间】：2020-05-05 13:48:54

【问题描述】：

在某些sample code here at w3schools 中，选择器是： ul li:first

我似乎找不到关于 :first 用法的文档 在这里它只制作“Coffee” hide() 而不是“Coffee 2”。 我是 jQuery 的新手，所以也许它在那里有一些尚未揭示的含义。 code screenshot from Tryit Editor

【问题讨论】：

这是一个类似于:first-child - api.jquery.com/first-selector 的 jquery 选择器

这能回答你的问题吗？ CSS selector for first element with class

这是来自google css :firstdeveloper.mozilla.org/en-US/docs/Web/CSS/:first的第三个结果

它在 jqeury 集合中选择第一个

谢谢 Ori Drori。它是一个已弃用的 jquery 选择器。首选方法是使用 .first() 进行过滤，这就是我在文档中看到的全部内容。

【参考方案1】：

我看到 cmets 公平地回答了这个问题；但我想谈谈 Ori Drori 提出的一点。 虽然:first 选择器与:first-child 相似，但存在内在差异。

让我们使用问题中链接的例子：

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>
<button>Click me</button>

当我们运行以下脚本时：

$(document).ready(function()
  $("button").click(function()
    $("ul li:first").hide();
  );
);

列表 1 中的项目 <li>Coffee</li> 被隐藏。但是，列表 2 中的那个仍然可见。

如果相反，我们将按以下方式使用选择器 :first-child：

$(document).ready(function()
  $("button").click(function()
    $("ul li:first-child").hide();
  );
);

<li>Coffee</li> 元素都被隐藏了。

这是因为:first 选择器访问第一个满足给定条件的 DOM 节点，即在给定选择器下选择的第一个元素。

而:first-child 选择器更具体，它选择作为其父元素的第一个子节点的节点。 如我们所见，第二个<li>Coffee</li> 元素是列表<ul>List 2</ul> 的第一个子元素 因此，如果我们使用第二个脚本，这两个元素都会被隐藏。

希望这能澄清您的疑虑。在我看来，更好的做法是使用一个类或 id，并且在需要时区分这些元素时更加具体。