为什么 [id] 的 CSS 选择器会带来比预期更多的匹配文本？

Question

情况：

我正在使用 [id] 的 CSS 选择器，即下面显示的 HTML 中所有具有 id 属性的元素。我收到的文本比我预期的要多，我不知道为什么。

谁能根据运行 sn-p 时黄色显示的内容来解释为什么我在匹配元素索引 2 处获得的文本比我预期的要多？

我认为索引 2 就是与 ul 标签相关的所有内容

<ul id="Listfriends>
<li>Goofy</li>
<li>Mickey</li>
<li>Daisy</li>
<li>Pluto</li>
</ul>

---

预期结果：

根据我的研究，我期待 HTML 显示以下结果，其中预期的匹配元素以黄色突出显示（运行 sn-p 时）：

<div class="noSel">
<h1><span class="markup">&lt;h1&gt;</span>Welcome to My Homepage<span class="markup">&lt;/h1&gt;</span></h1>

<div id="helpIntro">
<span class="markup">&lt;div class="intro"&gt;</span>
<div class="intro">
<p style="margin-top:4px;"><span class="markup">&lt;p&gt;</span>My name is Donald <span id="Lastname" style="border-color: rgb(255, 102, 102); background-color: rgb(255, 255, 153);"><span class="markup">&lt;span id="Lastname"&gt;</span>Duck.<span class="markup">&lt;/span&gt;</span></span><span class="markup">&lt;/p&gt;</span></p>
<p id="my-Address" style="border-color: rgb(255, 102, 102); background-color: rgb(255, 255, 153);"><span class="markup">&lt;p id="my-Address"&gt;</span>I live in Duckburg<span class="markup">&lt;/p&gt;</span></p>
<p style="margin-bottom:4px;"><span class="markup">&lt;p&gt;</span>I have many friends:<span class="markup">&lt;/p&gt;</span></p>
</div>
<span class="markup">&lt;/div&gt;</span>
</div>

<br>
<div class="helpUl" style="border-color: rgb(255, 102, 102); background-color: rgb(255, 255, 153);">
<span class="markup">&lt;ul id="Listfriends&gt;</span>
<ul id="Listfriends" style="margin-top:0px;margin-bottom:0px;">

<li><span class="markup">&lt;li&gt;</span>Goofy<span class="markup">&lt;/li&gt;</span></li>
<li><span class="markup">&lt;li&gt;</span>Mickey<span class="markup">&lt;/li&gt;</span></li>
<li><span class="markup">&lt;li&gt;</span>Daisy<span class="markup">&lt;/li&gt;</span></li>
<li><span class="markup">&lt;li&gt;</span>Pluto<span class="markup">&lt;/li&gt;</span></li>
</ul>       
<span class="markup">&lt;/ul&gt;</span>
</div>

<ul style="display:none;"></ul>
<p><span class="markup">&lt;p&gt;</span>All my friends are great!<span class="markup">&lt;br&gt;</span><br>But I really like Daisy!!<span class="markup">&lt;/p&gt;</span></p>

<p lang="it" title="Hello beautiful"><span class="markup">&lt;p lang="it" title="Hello beautiful"&gt;</span>Ciao bella<span class="markup">&lt;/p&gt;</span></p>


<h3><span class="markup">&lt;h3&gt;</span>We are all animals!<span class="markup">&lt;/h3&gt;</span></h3>

<p><span class="markup">&lt;p&gt;</span><span><b><span class="markup">&lt;b&gt;</span>My latest discoveries have led me to believe that we are all animals:<span class="markup">&lt;/b&gt;</span></b></span><span class="markup">&lt;/p&gt;</span></p>

<div class="helpTable" style="width:220px;">
<span class="markup">&lt;table&gt;</span>
<ul style="display:none;"></ul>
  <div class="noSel" style="margin-top:10px;">

---

实际结果：

相反，我得到：

如您所见，我在索引 2 处获得了额外的文本，即 ul id="Listfriends 之后的所有内容。

---

研究：

我已经阅读了许多链接，包括以下内容：

1. Mozilla: CSS selectors
2. w3schools CSS Selector Reference
3. Unable to get CSS Attribute selector to work
4. Chrome and CSS attribute selector

他们都说同样的事情。我应该使用语法[id]，所以我只能假设我没有正确理解 HTML 结构。但是我仍然很困惑为什么查询没有返回学习演示here中给出的预期结果。

您可以尝试 CSS 查询 here。

---

免责声明：

我在使用特定语言here 之前问过这个问题。如果需要，我可以删除该问题，但我宁愿现在尝试从 CSS/HTML 的角度理解这个问题，然后再回头看看是否存在任何未解决的特定于语言的实现问题。在这种情况下，我真的不确定 SO 礼仪。

我是 CSS 新手，因此请在回复时记住这一点。我愿意根据反馈改进这个问题。

Answer 1

你是否关闭了 ul 字段的 id 属性中的引号？在您的屏幕截图中，您看起来像：

<ul list id="Listfriends>

什么时候应该有：

<ul list id="Listfriends">

我不确定这是否是您的实际问题，但如果属性未关闭，它可能会混淆选择器，因为从技术上讲，关闭 " 之前的所有内容都将包含在代码中。