邻接兄弟姐妹选择器缺少第一个元素

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查找类“评级-星型编辑”的元素，它将按预期返回所有5：

​

​

再一次，如果我选择了"star-27“类的元素，它就可以正常工作，返回所有的5个元素(以及一些不同的非编辑元素)：

​

​

但是，如果我使用相邻的兄弟姐妹选择器来获得那些同时属于"star-27“和”评级-星-编辑“类的选择器，出于某种原因，它跳过第一个选择器，只返回4：

​

​

有人能看出我哪里出了问题吗？这不是使用相邻的同级选择器的正确方式吗，还是我在HTML中犯了错误？

干杯。

Answer 1

邻接同胞选择器 .A + .B不会为您提供具有.A和.B的元素集合。

它表示紧跟于.B的所有.As。

CSS 2级规格说明：

5.7相邻兄弟姐妹选择器 同级选择器具有以下语法：E2 ，其中是选择器的主题。如果E1和E2在文档树中共享相同的父节点，则选择器匹配，而E1紧接E2之前，忽略非元素节点(例如文本节点和注释)。

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

为了选择具有.A和.B类的元素，您应该使用.A.B。

在你的例子中：.star-27.rating-star-edit。

Answer 2

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

sel1 + sel2选择器，目标是每个与sel2匹配的元素，这些元素直接跟随另一个匹配sel1的元素。

Answer 3

没什么不对的。得到4个元素是正确的，因为相邻的意思是下一个兄弟姐妹。会发生的情况是，你要求第一个名为“.star-27”的同龄人拥有一个类“.打分-明星-编辑”，然后找到第一个，然后写下一个兄弟姐妹。然后继续讨论其他四个元素，等等。如果你想要所有的，你应该把'+‘去掉。