请帮助理解。
我想在导航块中悬停时设置链接样式。
如果您为此指定 .header-nav a:hover ,那么它们将起作用。如果您指定 .header-nav a + a:hover,则它们会停止。我只想为所有链接设置悬停样式,除了第一个(有一个标志)。似乎该规则的特异性高于应用于 header-nav 类的其他规则。组合器是否与伪类一起工作?还是其他地方的问题?
.header-nav {
color: #1D253C;
font-size: 16px;
}
.header-nav ul {
display: flex;
}
.header-nav li + li {
margin-left: 35px;
}
.header-nav a + a:hover {
color: #007188;
border-bottom: 2px solid #007188;
padding-bottom: 5px;
transition: color 0.3s ease;
}
<nav class="header-nav">
<ul>
<li><a href="#"><img src="img/logo.svg" alt="Logo" /></a></li>
<li><a href="#">Life insurance</a></li>
<li class="header-link-why-bello">
<a href="#">Why Bello</a>
</li>
<li><a href="#">Help</a></li>
</ul>
</nav>
为了清楚起见,我将悬停设置为红色。实际上,
.header-nav:hover
对于元素a
,您可以将颜色和其他样式更改为您需要的样式,而对于特定a:hover
元素,您保留默认颜色。