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

我肯定也有类似的问题，但我还没有找到一个结论性的答案。我有一个带有嵌套div的HTML脚本：

规则在这里解释

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

这适用于我的CSS文件：

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

但这不起作用：

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

据我所知，~应该只在我不相信他们是兄弟姐妹的情况下才起作用

---

有人能解释一下为什么这些课程是兄弟姐妹吗？或者把我和一个简单易懂的解释联系起来

这是因为您的类

。下拉列表

是一个标记的类别，而在标记中您只有文本“规则”。具有类

.rules

的元素嵌套在li元素中，而不是嵌套在li元素中。 要实现你想要的，请这样做

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

规则在这里解释

---

使用没有~sign的css。

这是因为您的类

。下拉列表

是一个标记的类别，在标记中只有文本“规则”。具有类

.rules

的元素嵌套在li元素中，而不是嵌套在li元素中。 要实现你想要的，请这样做

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

规则在这里解释

---

对于您编写的css，没有~sign.

这是正确的，因为

.rules

是

li

的子项，而不是您拥有的

a.dropdown

以及

li

的子项，因此有两个子项使它们成为兄弟

将

.rules

作为同级的代码段

.dropdown+.rules{
边框：红色实心/*仅影响第一个同级*/
}
.dropdown~.rules{
背景：黄色/*影响所有兄弟姐妹*/
}

规则在这里解释


规则在这里解释

这是正确的，因为

.rules

是

li

的子项，而不是您拥有的

a.dropdown

以及

li

的子项，因此两个子项使他们成为兄弟

将

.rules

作为同级的代码段

.dropdown+.rules{
边框：红色实心/*仅影响第一个同级*/
}
.dropdown~.rules{
背景：黄色/*影响所有兄弟姐妹*/
}

规则在这里解释


规则在这里解释

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

规则在这里解释
第二个清单项目

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

规则在这里解释
第二个清单项目

.parent{
填充：20px；
背景：番茄
}
.下拉列表{
背景：黄色
}
.规则{
填充：15px；
背景：绿色
}
.孙辈{
背景：蓝色
}

规则-儿童2

规则在这里解释

.parent{
填充：20px；
背景：番茄
}
.下拉列表{
背景：黄色
}
.规则{
填充：15px；
背景：绿色
}
.孙辈{
背景：蓝色
}

规则-儿童2

规则在这里解释

您可以试试这个

ul#navbar{
列表样式：无；
背景颜色：浅蓝色；
保证金：0；
填充：0；
显示：内联块；
}
ul#navbar li{
位置：相对位置；
浮动：左；
}
ul#navbar li a{
显示：内联块；
填充：10px 20px；
文字装饰：无；
文本对齐：居中；
颜色：#fff；
}
分区规则{
显示：无；
最小宽度：200px；
位置：绝对位置；
左：0；
最高：102%；
背景：浅蓝色；
}
联邦法规部{
保证金：0；
填充：0；
列表样式：无；
}
李处长{
浮动：无；
}
李亚科{
填充：10px；
文本对齐：居中；
颜色：#fff；
}
.下拉列表：悬停>.rules{
显示：块；
}

您可以试试这个

ul#navbar{
列表样式：无；
背景颜色：浅蓝色；
保证金：0；
填充：0；
显示：内联块；
}
ul#navbar li{
位置：相对位置；
浮动：左；
}
ul#navbar li a{
显示：内联块；
填充：10px 20px；
文字装饰：无；
文本对齐：居中；
颜色：#fff；
}
分区规则{
显示：无；
最小宽度：200px；
位置：绝对位置；
左：0；
最高：102%；
背景：浅蓝色；
}
联邦法规部{
保证金：0；
填充：0；
列表样式：无；
}
李处长{
浮动：无；
}
李亚科{
填充：10px；
文本对齐：居中；
颜色：#fff；
}
.下拉列表：悬停>.rules{
显示：块；
}