Html 嵌套父子悬停问题

我有多个嵌套的父子元素。现在，我正在寻找一种可能的解决方案，在悬停在任何父对象上时，我希望更改仅位于父对象旁边的子对象的颜色

<div class="parent">The Parent paragraph.
    <div  class="child">This is Child Para
        <div class="parent">The Parent paragraph.
            <div  class="child">This is Child Para
                <div class="parent">The parent paragraph.
                    <div  class="child">This is Child Para
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

我甚至尝试了第一种类型的

，但它不起作用

css中的哪些更改需要实现这一点

为此，必须将默认背景传递给子元素。默认情况下，所有元素都从父元素继承背景


.child{
背景：白色；
}
div.parent:hover>.child:第一个孩子{
背景：红色；
}
父段落。
这是儿童段落
父段。
这是儿童段落
父段。
这是儿童段落
这是第二段
第二段

第三段

第四段。
为此，必须将默认背景传递给子元素。默认情况下，所有元素都从父元素继承背景


.child{
背景：白色；
}
div.parent:hover>.child:第一个孩子{
背景：红色；
}
父段落。
这是儿童段落
父段。
这是儿童段落
父段。
这是儿童段落
这是第二段
第二段

第三段

第四段。
您不能使用CSS中的当前代码执行此操作，因为：

div.parent:hover > .child:first-of-type {
    background: red;
}

正在选择所有这些：

<div  class="child">This is Child Para
    <div class="parent">The Parent paragraph.
        <div  class="child">This is Child Para
            <div class="parent">The parent paragraph.
                <div  class="child">This is Child Para
                </div>
            </div>
        </div>
    </div>
</div>


父段

这是儿童段落

父段

这是儿童段落

父段

这是儿童段落

这是第二段
您不能使用CSS中的当前代码执行此操作，因为：

div.parent:hover > .child:first-of-type {
    background: red;
}

正在选择所有这些：

<div  class="child">This is Child Para
    <div class="parent">The Parent paragraph.
        <div  class="child">This is Child Para
            <div class="parent">The parent paragraph.
                <div  class="child">This is Child Para
                </div>
            </div>
        </div>
    </div>
</div>


父段

这是儿童段落

父段

这是儿童段落

父段

这是儿童段落

这是第二段
不完美


div.parent>p:hover+.child:type>p的第一个{
背景：红色；
}

父段

这是儿童段落

父段

这是儿童段落

父段

这是儿童段落

这是第二段
第二段

第三段

第四段。
不完美


div.parent>p:hover+.child:type>p的第一个{
背景：红色；
}

父段

这是儿童段落

父段

这是儿童段落

父段

这是儿童段落

这是第二段
第二段

第三段

第四段。
由于内部父和子div是第一个子类的一部分，因此它的颜色正在发生变化。请尝试下面的代码

<style>
div.parent:hover > .child {
    background: red;
}
.parent {
    background: none;
}
</style>


div.parent:悬停>.child{
背景：红色；
}
.家长{
背景：无；
}

当您将鼠标悬停在上一个div到下一个div时，它将正常工作，但如果您将鼠标悬停在下一个div到上一个div，则所有上一个div都将更改，因为最低的div是所有上一个div的一部分。
因为内部父div和子div是第一个子类的一部分，所以它的颜色会发生变化。请尝试下面的代码

<style>
div.parent:hover > .child {
    background: red;
}
.parent {
    background: none;
}
</style>


div.parent:悬停>.child{
背景：红色；
}
.家长{
背景：无；
}

当您将鼠标悬停在upper div到lower div之间时，它将正常工作，但如果将鼠标悬停在lower到upper上，所有以前的div都将更改，因为最低div是所有upper div的一部分。
在我看来，在这种情况下，您需要JavaScript的帮助。将鼠标悬停在父对象上时，在子对象上添加一个类并使用它进行样式设置。您的问题不明确。你能解释一下你的问题吗？结构必须是这种形式吗？@Marian07是的。事实上，这只是一个静态的例子。但在我的例子中，它是动态的，最多n次。第一种类型使用元素作为引用，而不是类，因此它将自动引用所有
而不是
.child
类。在我看来，在这种情况下，您需要JavaScript的帮助。将鼠标悬停在父对象上时，在子对象上添加一个类并使用它进行样式设置。您的问题不明确。你能解释一下你的问题吗？结构必须是这种形式吗？@Marian07是的。事实上，这只是一个静态的例子。但在我的例子中，它是动态的，最多n次。第一种类型使用元素作为引用，而不是类，因此它将自动引用所有
s，而不是
.child
类。结果没有变化。仍然相同。为此，您必须将默认背景传递给
子元素。默认情况下，所有元素都来自父元素，这就是我想要的。我静态地绑定它只是为了作为示例来展示它。但实际上在我的例子中，它是动态的。您可以将默认背景颜色传递给所有子元素。使用您的代码，我得到了答案。我还没有完全用过它，但有点像你的。谢谢你的回答。结果没有变化。仍然相同。为此，您必须将默认背景传递给
子元素。默认情况下，所有元素都来自父元素，这就是我想要的。我静态地绑定它只是为了作为示例来展示它。但实际上，在我的例子中，它是动态的。您可以将默认背景颜色传递给所有子元素