HTML 为什么我的嵌套类是兄弟而不是 child

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 类“rules”是“dropdown”类的子类。但是，当我处理我的 css 文件时，除非我使用 ~ 连接器，否则我无法在下拉列表类上执行悬停操作来影响我的规则类。

这在我的 CSS 文件中有效:

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

但这不起作用:

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

据我所知，只有当这些类是我不相信的 sibling 时， ~ 才应该起作用。

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

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>

首先，我们先解释一下概念的区别:

• parent 和 child 处于不同层次。 li 是ul。 ul 是父级。
• sibling 是同一个 parent 的 child ，并且总是在同一个地方等级。最里面的 ul 有 2 个 child li(在我的例子中，不是你的)。而那些 child li 是 sibling 。

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