Question

我试图进入CSS并且有一个非常简单的情况，即子选择器不能按我的预期工作。我只是不明白。

我的HTML：

<div>
    <p>
        <div>Div 1</div>
        <div>Div 2</div>
        <span>Span 1</span>
    </p>

    <span>Span 2</span>
</div>

现在是否：

p span {
    color: red;
}

NOR：

p > span {
    color: red;
}

定位任何我的span元素。我认为两者都会以我的“Span1”span元素为目标。

而

div span {
    color: red;
}

AND

div > span {
    color: red;
}

目标我的span元素（我假设只有第一个会影响两个跨度，而后者只会影响“Span2”span元素。

有人可以帮帮我吗？谢谢。

Answer 1

https://jsfiddle.net/1t1z4674/

看看小提琴。

<{1}}内的<div>无效，因此您的CSS无效。

请参阅此回答https://stackoverflow.com/a/10763952/822426

来自fine specification：

p - 段

[...]

允许的内容

短语内容

这是什么短语内容？ Phrasing content：

由与普通字符数据混合的短语元素组成。

正常字符数据就是：未标记文本。 Phrasing elements是：

或 em 或 strong ... [一堆其他元素 div ]

因此，<p>不是有效的HTML。根据规范中列出的标记省略规则，<p><div></div></p>标记会自动由<p>标记关闭，从而使<div>标记不会匹配</p>。浏览器完全有权通过在<p>之后添加一个开放的<p>代码来尝试更正它：

<div>

您不能将<p></p><div></div><p></p>放在<div>内，并从各种浏览器中获得一致的结果。为浏览器提供有效的HTML，它们会表现得更好。

您可以将<p>放在<div>内，但如果您将<div>替换为<p>并对其进行适当设置，则可以得到您想要的内容。

您在about.com上的引用不同意w3.org上的规范，您的引用会误导您。

Answer 2

你可以试试这个：

<html>
<head> 
<style>
span {
    color: red;
}
</style>
</head>
<body>
<div>
    <div>
        <p>Div 1</p>
        <p>Div 2</p>
        <span>Span 1</p>
    </div>
    <span>Span 2</span>
</div>
</body>
</html>

如果你想通过css引用。然后在span中添加class并添加 css那个特定的课程。

为什么儿童选择器不起作用？

2 个答案: