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

这是关于一个列表和双边效果并排选择和悬停的元素，如图所示。类，相邻的兄弟和伪选择器不能一起工作

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

这里是它增加了边界（其中出现的下一个行之前的样式表）的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。

有谁知道与所有这些选择器一起使用有冲突吗？

请让我知道，如果我可以添加任何其他的东西，以获得一个很好的答案。

来源

2017-01-16 Kraken

退房这样的：http://www.codeply.com/go/X8E1CUt0UL - 它的工作原理 – Banzay

啊有趣。除了临时样式之外，您似乎必须为元素设置基础样式。如果你把这个答案写入答案，我会接受。谢谢。 – Kraken

您需要将透明边框设置为默认值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>

来源

2017-01-16 13:11:56 Banzay

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

回答

相关问题