класс, соседний родственный брат и псевдоселекторы не работают вместе

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 s - это, безусловно, соседние братья и сестры. Это не работает на firefox или chrome.

Кто-нибудь знает о любых конфликтах с использованием всех этих селекторов вместе?

Пожалуйста, дайте мне знать, если я могу добавить что-нибудь еще в сообщение, чтобы получить хороший ответ.

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>