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

Question

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

我想我可以这样做：

element element {rule;}

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

Answer 1

Space 分隔的选择器表示子选择器。您正在寻找 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

为此，您的 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 3

p 元素在物理上只是 "under" h3 元素，而不是在层次上。尝试：

h3+p {
    background-color:red;
}

for further info see sibling selector

Answer 4

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

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

What is the proper way to apply a css rule to an element under another one?

html

css

css-selectors

Adjacent sibling selector:

General sibling selector: