将css规则应用于另一个元素下的元素的正确方法是什么？答案

【问题标题】：What is the proper way to apply a css rule to an element under another one?将css规则应用于另一个元素下的元素的正确方法是什么？
【发布时间】：2015-01-09 13:08:35
【问题描述】：

h3 p {background-color:red} 我认为会影响 h3 标签下的 p 标签中的任何内容。没有。

我想我可以这样做：

element element {rule;}

我看到this 认为您可能只能对 div 下的元素执行此操作。但它也不适用于 div 下的任何 p。

【问题讨论】：

见Adjacent Sibling Selectors。
element1 element2 = element2 inside element1, element1 + element2 = element1 与element2同级

标签： html css css-selectors

【解决方案1】：

您的 CSS 规则h3 p {background-color:red} 暗示您要将<p> 标签的背景设置为在中的<h3> 标签红色。那就是：

<h3>h3 tag
    <p>paragraph</p>
</h3>

这称为嵌套。但是您不能在标题中嵌套段落，这是无效的。但是，您可以将段落嵌套在 div 中，如下所示：

<div>This is a div
    <p>paragraph</p>
</div>

你的 CSS div p {background-color:red} 可以工作。

【讨论】：

我明白我做错了什么，你的解释很好，

【解决方案2】：

空格分隔的选择器表示子选择器。你正在寻找sibling selectors。

Adjacent sibling selector:

h3 + p {background-color:red}

<h3>header</h3>
<p>paragraph</p>
<p>paragraph</p>

General sibling selector:

h3 ~ p {background-color:red}

<h3>header</h3>
<p>paragraph</p>
<p>paragraph</p>

【讨论】：

Alexander，您是如何在答案中获得带有“运行代码 sn-p”等按钮的？
@spex5 它在插入图像按钮旁边，在{} 代码格式化按钮的两个上方。有关信息，请参阅this page。

【解决方案3】：

为此，您的 p 元素必须位于 div 标签中。

例子：

<html>
<head>
<style>
    div p {
        background-color: red;
    }
</style>
<body>

    <div>i am div

    <p>hello in red color</p>
    </div>
</body>
</html>

【讨论】：

【解决方案4】：

p 元素仅在物理上位于 h3 元素的“下方”，而不是分层的。试试：

h3+p {
    background-color:red;
}

for further info see sibling selector

【讨论】：