Question

在以下简单文件中：

div+p {
  color: red;
}

<div>
  <p>Hi Caitlin! Welcome to CSS!</p>
</div>

'p'（段落）标签之间的文本尽管是div元素的子元素，但不会显示为红色。 '〜'选择器也不起作用，但是'＆gt;'按预期执行。我在Windows机器上使用Chrome 49。

Answer 1

+是相邻的兄弟组合子。

div和p有父/子关系（>是子组合子，而空格是后代组合子）而不是兄弟/姐妹关系（这将是{ {1}}）。

Answer 2

div是父元素，而p是子元素

由于元素之间的关系是亲子关系，因此您必须使用'>'或' '

但请注意div > p只会选择直接的p子元素，但它不适用于p不是直接子元素的其他div元素

那是

div > p{ color: red; }

只能像这样工作

<div>
    <p>this will be in red color</p>
    <div>
        <p>this will not be in red color</p>
    </div>
    <p>this will also be in red color</p>
    <div>
        <div>
            <p>this will not be in red color</p>
        </div>
    </div>
</div>

但

div p{ color: red; }

像这样工作

<div>
    <p>this will be in red color</p>
    <div>
        <p>this will also be in red color</p>
    </div>
    <p>this will also be in red color</p>
    <div>
        <div>
            <p>this will also be in red color</p>
        </div>
    </div>
</div>

CSS选择器无法按预期运行

2 个答案: