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

Question

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

过去我们称它为边框折叠，因为我们使用的是 table 个元素。

这是添加边框的 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.

有人知道一起使用所有这些选择器会发生冲突吗？

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

Answer 1

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

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
}

<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>

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

class, adjacent sibling, and pseudo selectors not working together

css

border

css-selectors

pseudo-element