[英]CSS :last-child AND :hover on an a link in a ul
I'm styling the last child of a navigation menu which I seem to be able to do fine with the following code:我正在为导航菜单的最后一个子项设置样式,我似乎可以使用以下代码完成:
.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;
}
The trouble comes when I try and target the <a>
on the last child on hover.当我尝试在悬停时将
<a>
定位到最后一个孩子时,麻烦就来了。 I'm using this:我正在使用这个:
.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}
But it seems to style all of the <a>
tags and not just the last child.但它似乎设计了所有
<a>
标签的样式,而不仅仅是最后一个孩子。 I've tried variations such as: ul > li a
but I can't seem to get it o work correctly.我尝试了以下变体:
ul > li a
但我似乎无法让它正常工作。
I have a Codepen here: https://codepen.io/shaun-taylor/pen/LXdGGN我在这里有一个 Codepen: https ://codepen.io/shaun-taylor/pen/LXdGGN
The main goal being for this one is just to turn the last link on the top level only red when you hover on it I guess - Thnk you for reading!这个的主要目标只是当你悬停在顶层的最后一个链接时,将它变成红色,我猜 - 谢谢你的阅读!
you should change你应该改变
.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}
to到
.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>
Use This:用这个:
.aston-menu-light ul > li:last-child a:hover {
color:red;
}
You shold rewrite你不许改写
.aston-menu-light ul > li > a:last-child:hover {
color:red !important;
}
to到
.aston-menu-light ul > li:last-child > a:hover {
color:red;
}
What you were doing wrong is that in all the li
elements the a
element is always the last child!你做错的是在所有
li
元素中a
元素总是最后一个孩子! Therefore in all of them, it will turn red when you hover.因此,在所有这些中,当您悬停时它会变成红色。 What you needed was the last
li
element, therefore using li:last-child
in the CSS.您需要的是最后一个
li
元素,因此在 CSS 中使用li:last-child
。
Also, there is no need to use the !important
, since this CSS selector is more specific than just此外,没有必要使用
!important
,因为这个 CSS 选择器不仅仅是
a {
color: black;
}
It will be red anyway.反正都会红的。
Just do this to simplify it.这样做只是为了简化它。
.aston-menu-light ul li:last-child a:hover {
color:red !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.