我想要做的是将鼠标指针悬停在第一个链接上时显示菜单,如果使用.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/

10-12 12:32
查看更多