Question

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

我以为我可以这样做：

element element {rule;}

enter image description here

我看到this认为你可能只能用div下的元素来做..但它对于div下的任何p都不起作用。

enter image description here

Answer 1

空格分隔的选择器意味着子选择器。您正在寻找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>

Answer 2

您的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}会起作用。

Answer 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>

Answer 4

p元素仅在物理上“h6”元素下，而不是分层次。尝试：

h3+p {
    background-color:red;
}

for further info see sibling selector

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

4 个答案:

Adjacent sibling selector

General sibling selector