从 css 更改段落样式的层次结构问题

Question

我想将鼠标悬停在不同的元素上，而不用默认

样式覆盖它，从而将段落样式从 CSS 更改为

。 HTML:

<div id="wrap">

    <div class="a">AAAA</div>

    <div class ="b">
      <div class ="sub_b">
            <p>BBBB</p></div>
      </div>
</div>

CSS:

.a {
    color: red;
}
p {
    color: green;
    text-align: center;
}

.a:hover ~ .b {
    background-color: blue;
    color: orange;
}

我想将鼠标悬停在 AAAA 上时，将字体 BBBB 的颜色更改为橙色。悬停发生，BBBB 样式字体获取更改背景颜色和字体颜色的命令，但字体颜色被默认段落 P 样式覆盖。我无法更改 html 层次结构的大部分内容。我只能从 CSS 开始做什么？

Answer 1

您的 css 工作正常！只是 select 你的 class="b"

里面的 <p>

像这样：

.a:hover ~ .b p {
    color: orange;
}

.a {
    color: red;
}
p {
    color: green;
    text-align: center;
}

.a:hover ~ .b {
    background-color: blue;
    color: orange;
}

.a:hover ~ .b p {
    color: orange;
}

<div id="wrap">

    <div class="a">AAAA</div>

    <div class ="b">
      <div class ="sub_b">
            <p>BBBB</p></div>
      </div>
</div>

从 css 更改段落样式的层次结构问题

hierarchy problems changing paragraph style from css

css

hover