这个冗长的伪类组合是一个有效的陈述吗？

Question

这是我的代码：

.fontmenu .fontlist{
        position: absolute;
        bottom:30px;
        display:none;

    }

.fontbutton button:hover .fontmenu .fontlist{
        display:block;
    }

<div class="fontmenu">
    <div class="fontbutton">
        <button>fonts</button>
    </div>
    <div class="fontlist">  
        <div onclick="font(1)">Arial</div>
        <div onclick="font(2)">Courier</div>
        <div onclick="font(3)">Verdana</div>
        <div onclick="font(4)">sans</div>
    </div>
</div>

CSS 不工作。当我悬停按钮时，列表不可见。我想知道.fontbutton button:hover .fontmenu .fontlist{}是否有效。

Answer 1

这是你用过的：

.fontbutton button:hover .fontmenu .fontlist{ }

这行不通

为什么它不起作用？继续阅读。我会解释。但首先，让我们看看什么会起作用。

---

让我们尝试使用一些选择器：

.fontbutton:hover + .fontlist {}

这将起作用

让我们看看它的实际效果：

.fontmenu .fontlist {
  bottom: 30px;
  display: none;
}

.fontbutton:hover + .fontlist {
  display: block;
}


/* No need to include the wrapper fontmenu div,
just target the siblings, ie, fontbutton and fontlist.
The + selector must be used, otherwise, the browser will
think fontlist is the child of fontbutton */

<div class="fontmenu">
  <div class="fontbutton">
    <button>fonts</button>
  </div>
  <div class="fontlist">
    <div onclick="font(1)">Arial</div>
    <div onclick="font(2)">Courier</div>
    <div onclick="font(3)">Verdana</div>
    <div onclick="font(4)">sans</div>
  </div>
</div>

请注意，即使我们将鼠标悬停在按钮的右侧，列表也会变得可见。这是因为我们的目标是 div fontbutton 而不是 @ 987654326@ 元素。因此，当我们将鼠标悬停在 div 而不是按钮时，浏览器会显示列表。

如何解决？

我们需要稍微修改一下html。

.fontmenu .fontlist {
  display: none;
}

button:hover + .fontlist {
  display: block;
}

<div class="fontmenu">
  <button>fonts</button>
  <div class="fontlist">
    <div onclick="font(1)">Arial</div>
    <div onclick="font(2)">Courier</div>
    <div onclick="font(3)">Verdana</div>
    <div onclick="font(4)">sans</div>
  </div>
</div>

看，我删除了 .fontbutton 类，并使 <button> 成为 .fontlist 的兄弟。因此，现在，您可以看到列表仅在我们悬停按钮时可见。

---

现在你会说我可以在你的 css 中添加一些选择器。 但我没有这样做，因为你无法定位 <button>，然后向下移动到 .fontlist，它位于单独的 div。

.fontbutton > button:hover ? .fontmenu > .fontlist{ }

?的地方会有问题。

1. 首先，我们需要转到.button。
2. 上移至.fontbutton。
3. 添加+ 选择器并切换到.fontmenu。
4. 下移至.fontlist。

在我们下移到.button之后，我们不能再上去.fontbutton。

CSS 没有父选择器之类的东西。

所以，很明显，我们不能那样使用它。