CSS伪类选择器：first-这是什么？我在示例代码中找到了，找不到关于它的文档

Question

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

我似乎找不到有关：first用法的文档在这里，它仅使“ Coffee” hide（）而不是“ Coffee 2”。我是jQuery的新手，所以也许它在这里具有尚未公开的含义。code screenshot from Tryit Editor

Answer 1

我看到这些评论可以公平地回答问题；但我想谈一谈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，并在需要时区分这些元素时更具体。