CSS:last child AND:将鼠标悬停在ul中的一个链接上

Question

我正在设计导航菜单的最后一个子菜单，我似乎可以用以下代码完成：

.aston-menu-light ul > li:last-child {
border:2px solid blue;
border-radius: 50px;
padding:0 20px 0 20px;
} 
.aston-menu-light ul > li > ul > li:last-child {
border:none !important;
padding:0 !important;
} 
.aston-menu-light ul > li:last-child:hover {
background-color:#ffff;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
} 

当我尝试将<a>定位在悬停的最后一个子对象上时，问题就来了。我使用的是：

.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
} 

但它似乎设计了所有<a>标签的样式，而不仅仅是最后一个子标签。我尝试过一些变体，例如：ul > li a，但似乎无法使其正常工作。

我在这里有一个Codepen：https://codepen.io/shaun-taylor/pen/LXdGGN

这篇文章的主要目标是当你悬停在上面时，只将顶层的最后一个链接变成红色——谢谢你的阅读！

Answer 1

您应该更改

.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}

至

.aston-menu-light>ul>li:last-child > a:hover {
color:red !important;
} 

/* CSS Document */
a {
	color: black;
}
nav {
	margin: 50px 0;
}
nav ul {
	padding: 0;
margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
}
nav a {
	display:block;
	padding:0 10px;	
	color:#black;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}
/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}
/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}
	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
.aston-menu-light ul > li:last-child {
	border:2px solid blue;
	border-radius: 50px;
	padding:0 20px 0 20px;
} 
.aston-menu-light ul > li > ul > li:last-child {
	border:none !important;
	padding:0 !important;
} 
.aston-menu-light ul > li:last-child:hover {
	background-color:#ffff;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
} 
.aston-menu-light>ul>li:last-child > a:hover {
	color:red !important;
}

<nav class="aston-menu-light">
<ul>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>        
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>

Answer 2

使用此：

.aston-menu-light ul > li:last-child a:hover {
color:red;
}

Answer 3

您必须重写

.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
} 

至

.aston-menu-light ul > li:last-child > a:hover {
color:red;
} 

你做错的是，在所有的li元素中，a元素总是最后一个子元素！因此，在所有它们中，当你悬停时，它都会变成红色。您需要的是最后一个li元素，因此在CSS中使用li:last-child。

此外，不需要使用!important，因为这个CSS选择器比更具体

a {
color: black;
}

它无论如何都会是红色的。

Answer 4

这样做只是为了简化它。

.aston-menu-light ul li:last-child a:hover {
color:red !important;
}