html - HTML 为什么我的嵌套类是兄弟而不是孩子

Question

我敢肯定那里有类似的问题，但我无法找到确凿的答案。我有一个带有嵌套 div 的 HTML 脚本：

<ul id="navbar">
  <li><a href='#' class='dropdown'>Rules</a>
    <div class='rules'>
      <ul>
        <li>Rules Explanation Here</li>
      </ul>
    </div>
  </li>
</ul>

我相信 div 类“规则”是“下拉”类的子类。但是，当我处理我的 css 文件时，除非我使用 ~ 连接器，否则我无法在下拉类上进行悬停操作来影响我的规则类。

这适用于我的 CSS 文件：

.dropdown:hover ~ .rules{
    opacity: 1;
}

但这不起作用：

.dropdown:hover .rules{
    opacity: 1;
}

据我了解， ~ 应该只在类是我不相信它们是兄弟姐妹的情况下才起作用。

有人可以在这里解释为什么这些类是兄弟姐妹，或者将我链接到一个易于理解的解释。

标签： htmlcss

Answer 1

这是您的代码的完全缩进版本，我认为这将帮助您更好地可视化答案：

<ul id="navbar">
  <li>
    <a href='#' class='dropdown'>Rules</a>
    <div class='rules'>
      <ul>
        <li>Rules Explanation Here</li>
        <li>Second list item</li>
      </ul>
    </div>
  </li>
</ul>

首先，让我们解释一下概念之间的区别：

• 父母和孩子处于不同的层次。li是 的孩子ul。ul是父母。
• 兄弟姐妹是同一父母的孩子，并且始终处于同一级别。最里面ul有 2 个孩子li（在我的例子中，不是你的）。那些孩子li是兄弟姐妹。

那么.dropdown和会发生什么.rules？它们都是同一个元素的子li元素。请注意，在开始a.dropdown之前打开和关闭.rules。所以他们是同一个父母的孩子，就像在现实生活中一样，这使他们成为兄弟姐妹。