我想要做的是将鼠标指针悬停在第一个链接上时显示菜单,如果使用.show:hover .menu
可以,但是如果使用nth-child,则不起作用。
特别地,如果我使用nth-child(1)
,则链接将填满整行,就像成为一个块元素本身,而不是其子元素一样,然后
不行动。
这是所有代码:
.show {
position: relative;
}
.show:hover {
background-color: #f00;
}
/* not work */
.show:hover:nth-child(2) {
display: block;
}
/* work */
.show:hover .menu {
display: block;
}
.menu {
position: absolute;
display: none;
left: 0px;
top: 20px;
width: 100px;
height: 200px;
background-color: #333
}
<div>
<a href="#" class="show">11111
<div class="menu">
</div>
</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>
</div>
最佳答案
current-element:nth-child(n)
伪选择器正在查看current-element是否为第n个孩子,而不是针对current-element的孩子。
因此,您的.show:hover:nth-child(2)
将匹配具有show类并且已被悬停并且是其父级的第二个子级的任何元素。
您的标记没有任何合适的元素,因为匹配.show
的唯一元素是其父元素的第一个子元素。
当您使用.show:hover:nth-child(1)
时,您实际上是在匹配锚<a>
。
您想要的是带有子选择器.show:hover > :nth-child(1)
的>
实际将其直接子对象作为目标:
.show {
position:relative;
}
.show:hover {
background-color:#f00;
}
/* works */
.show:hover > :nth-child(1) {
display: block;
}
.menu {
position:absolute;
display:none;
left:0px;
top:20px;
width:100px;
height:200px;
background-color:#333
}
<div>
<a href="#" class="show">11111
<div class="menu">
</div>
</a>
<a href="#">22222</a>
<a href="#">33333</a>
<a href="#">44444</a>
</div>
关于html - 为什么CSS Nth-child选择器不起作用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56697428/