从 CSS 更改段落样式的层次结构问题答案

【问题标题】：hierarchy problems changing paragraph style from css从 CSS 更改段落样式的层次结构问题
【发布时间】：2020-06-22 01:07:56
【问题描述】：

我想改变段落样式

来自 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 做什么？

【问题讨论】：

标签： css hover

【解决方案1】：

你的 CSS 工作正常！只需在 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>

【讨论】：