class，相邻的兄弟和伪选择器不能一起工作

Question

这是关于列表和并排选择和悬停元素的双边框效果，如图所示。

回到那天我们称之为边界崩溃，因为我们使用的是表格元素。

这是添加边框的CSS（位于样式表中的下一行之前）：

li.selected, li:hover { border: green 1px solid; border-radius: 1px; }

当悬停跟随选定的列表项时，我得到了它的工作：

li.selected + li:hover { border-top: 1px solid transparent; }

但是当所选项目跟随悬停时，由于某种原因，此规则不适用：

li:hover + li.selected { border-top: 1px solid transparent; }

这些规则的想法很简单，如果它们彼此相邻，请创建第二个项transparent的顶部边框。

我检查过它并没有被任何地方覆盖，而且两个li肯定是相邻的兄弟姐妹。这不适用于firefox或chrome。

有没有人知道同时使用所有这些选择器的任何冲突？

如果我可以在帖子中添加任何其他内容以获得一个好的答案，请告诉我。

Answer 1

您需要将透明边框设置为li的默认边框。

＆＃13;

＆＃13;

li.selected, li:hover {
    border: green 1px solid;
    border-radius: 1px;
}

li {
    border: transparent 1px solid;
}

li.selected + li:hover, li:hover + li.selected {
    border-top: 1px solid transparent
}

＆＃13;

<ul>
 <li>dfsafasf</li>
 <li class="selected">dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
</ul>

＆＃13;

＆＃13;

＆＃13;