У меня есть что-то, что ведет себя так же, как предоставленный фрагмент. У меня есть список элементов, когда при выборе одного из них я хочу, чтобы он отображался в верхней части списка, что я могу легко сделать с помощью упорядочения по гибкому порядку. За один раз можно выбрать только один. Но поскольку каждый элемент списка имеет границы, последний элемент не должен иметь границы. Простое использование li:last-of-type отлично работает в большинстве случаев, за исключением тех случаев, когда выбран последний элемент списка.
Я пробовал несколько селекторов, которые должны выбрать последний элемент списка в неупорядоченном списке, который не имеет данного класса, но селектор last-of-type, похоже, не ведет себя правильно.
В случае, если в коде не ясно, селектор, к которому я обращаюсь, равен .selection li:not(.selected):last-of-type. И проблема заключается в двойной границе внизу списка. Это должна быть единая граница, исходящая из неупорядоченного элемента списка.
.selection ul {
display: flex;
flex-direction: column;
border: .15rem solid #666;
}
.selection li {
order: 2;
border-bottom: .15rem dashed #666;
}
.selection li.selected {
order: 1;
}
/** This selector should work in my mind, but it doesn't **/
.selection li:not(.selected):last-of-type {
border-bottom: none;
}
/** Non-important styles to put it into context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }<div class="selection">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li class="selected">3</li>
</ul>
</div>