Как настроить таргетинг на якорь в CSS, который отличается от других братьев и сестер
У меня 5 братьев и сестер в ненумерованном списке. В каждом из них есть элемент <a>.
4 из них должны вести себя точно так же, при наведении курсора им необходимо изменить цвет фона. Один элемент вообще не меняет фон. Как нацелиться на этот конкретный <a>? Я пытался использовать идентификатор, но он не отменяет предыдущую общую цель. Я пробовал псевдокласс: nth-child с комбинатором, но не работал.
.nav-bar {
display: inline-block;
font-size: 1.2rem;
background-color: rgba(85, 85, 85, 0.3);
/* padding: 10px; */
/* margin: 10px; */
}
#slot-1 {
background-color: #AD6500;
/* padding: 1rem; */
}
#slot-3 {
background-color: none;
display: inline-block;
font-size: 1rem;
/* padding: 1rem; */
}
a {
color: white;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
/* margin:0; */
}
a:hover {
background-color: #AD6500;
padding: 10px 20px;
}<header>
<nav>
<ul class = "list">
<li class = "nav-bar" id = "slot-1">
<a class = "nav-bar-different-font-color" href = "https://www.amazon.it">Home</a>
</li>
<li class = "nav-bar" id = "slot-2">
<a href = "https://www.amazon.it">News</a>
</li>
<li id = "slot-3">
<a href = "https://www.amazon.it">February 27.2021 - New feature: CSS oeverflow: overlay</a>
</li>
<li class = "nav-bar" id = "slot-4">
<a href = "https://www.amazon.it">Compare Browsers</a>
</li>
<li class = "nav-bar" id = "slot-5">
<a href = "https://www.amazon.it">About</a>
</li>
</ul>
</nav>
</header>Для меня все 5 имеют одинаковое поведение при наведении курсора. Разве это не то, что вам нужно? Пожалуйста, поясните ожидаемое поведение.
@Huangism Спасибо за ваш вклад, это именно то, что я хочу сделать. Я попытался вставить «li: not (# slot-3) a: hover» в конец CSS, но это не сработало. Пожалуйста помоги.
@Matteo Я отправил ответ, так как никто другой не сделал
Ответы 1
Я заменил вашу линию a:hover на li:not( #slot-3 ) a:hover. Также я удалил правило bg none для # slot-3
Приведенное выше говорит о том, что нацельтесь на элемент li, который не является id=slot-3, и нацелитесь на его потомок a:hover. Так что для слот-3 это правило попросту не действует.
Есть и другие способы сделать то же самое, но я думаю, что это самый чистый
.nav-bar {
display: inline-block;
font-size: 1.2rem;
background-color: rgba(85, 85, 85, 0.3);
/* padding: 10px; */
/* margin: 10px; */
}
#slot-1 {
background-color: #AD6500;
/* padding: 1rem; */
}
#slot-3 {
/* removed, not needed */
/* background-color: none; */
display: inline-block;
font-size: 1rem;
/* padding: 1rem; */
}
a {
color: white;
text-decoration: none;
display: inline-block;
padding: 10px 20px;
/* margin:0; */
}
li:not( #slot-3 ) a:hover {
background-color: #AD6500;
padding: 10px 20px;
}<header>
<nav>
<ul class = "list">
<li class = "nav-bar" id = "slot-1">
<a class = "nav-bar-different-font-color" href = "https://www.amazon.it">Home</a>
</li>
<li class = "nav-bar" id = "slot-2">
<a href = "https://www.amazon.it">News</a>
</li>
<li id = "slot-3">
<a href = "https://www.amazon.it">February 27.2021 - New feature: CSS oeverflow: overlay</a>
</li>
<li class = "nav-bar" id = "slot-4">
<a href = "https://www.amazon.it">Compare Browsers</a>
</li>
<li class = "nav-bar" id = "slot-5">
<a href = "https://www.amazon.it">About</a>
</li>
</ul>
</nav>
</header>Спасибо вам огромное за это, вы звезда !!!
Итак, для слот-3 вы не хотите, чтобы цвет фона менялся при наведении курсора? Вы можете просто изменить курсор, чтобы НЕ выбирать
li:not(#slot-3) a:hoverслот-3.