Question

我想做的是将鼠标指针悬停在第一个链接上时显示菜单，如果我使用.show:hover .menu可以，但是如果我使用nth-child，则不起作用。

特别是，如果我使用nth-child(1)，链接将填满整行，就像变成块元素本身，而不是其子元素，nth-child(2)然后不是行动。

这是所有代码：

.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>

Answer 1

current-element:nth-child(n)伪选择器正在查看当前元素是否是这样的 nth-child ，它没有针对当前元素的子元素。

因此，您的.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>

为什么CSS Nth-child选择器不起作用？

1 个答案: