相邻的兄弟选择器缺少第一个元素

Question

鉴于此html：

<div class="rating-system book-rating-27" title="Average rating: out of 5 (0 ratings)">
<a class="rating-star star-27 star-27-1 rating-star-edit" href="#" onclick="setStarRating(27, 1);return false;"><img src="images/star_empty.png"></a>
<a class="rating-star star-27 star-27-2 rating-star-edit" href="#" onclick="setStarRating(27, 2);return false;"><img src="images/star_empty.png"></a>
<a class="rating-star star-27 star-27-3 rating-star-edit" href="#" onclick="setStarRating(27, 3);return false;"><img src="images/star_empty.png"></a>
<a class="rating-star star-27 star-27-4 rating-star-edit" href="#" onclick="setStarRating(27, 4);return false;"><img src="images/star_empty.png"></a>
<a class="rating-star star-27 star-27-5 rating-star-edit" href="#" onclick="setStarRating(27, 5);return false;"><img src="images/star_empty.png"></a>
<input id="hidden_book_rating_27" name="book_rating" type="hidden" value="0"><br>
</div>

如果我使用jquery查找class＆＃34; rating-star-edit＆＃34;的元素，它会按预期返回全部5：

如果我选择了类＃34; star-27＆＃34;它工作正常，返回所有5个（以及一些非编辑的）：

然而，如果我使用相邻的兄弟选择器来获得那些同时属于＆＃34; star-27＆＃34;和＆＃34; rating-star-edit＆＃34;，由于某种原因，它会跳过第一个而只返回4：

谁能看到我哪里出错了？这不是使用相邻兄弟选择器的正确方法，还是我在HTML上的某个地方出错？

干杯。

Answer 1

Adjacent sibling selector .A + .B不会为您提供包含.A和.B的元素集合。

它代表紧跟.B s

之后的所有.A

CSS level 2 Spec状态：

  

<强> 5.7 Adjacent sibling selectors

     

相邻的兄弟选择器具有以下语法：E1 + E2，其中 E2   是选择器的主题。选择器匹配E1和E2   在文档树中共享同一个父级，并且E1紧接在之前   E2，忽略非元素节点（例如文本节点和注释）。

因此第一个元素将不匹配，结果将是4个元素。

要选择同时包含.A和.B类别的元素，您应该使用.A.B代替。
在您的情况下：.star-27.rating-star-edit。

Answer 2

它只返回4，因为第一个star-27不是任何元素的相邻兄弟...

sel1 + sel2选择器定位与sel2匹配的每个匹配sel1元素的元素。

Answer 3

没有错。它正确得到4个元素，因为相邻意味着下一个兄弟姐妹。会发生什么事情，你要求第一次出现＆＃39; .star-27＆＃39;谁有兄弟姐妹上课？.- staring-edit＆＃39;并找到第一个并写下一个兄弟。然后继续讨论其他四个元素。如果你想要所有这些，你应该选择＆＃39; +＆＃39;进行。