儿童组合子和跨度

Question

我有这种风格！

 div > .action{
     color: blue;
 }

这段代码

    <div>
    <p class="action">
         Hey, this is a first action paragraph.
        <span> This is  a SPAN inside the action</span>
        <h3>Not a direct child, not a DIV, but a h3 block</h3>
        <div>Not a direct child but a DIV</div>
        <span> This a SPAN inside the action, AND after the closing block</span>
    </p>
    </div>

因此，当h3，div和下一个跨度为黑色时，第一个跨度为蓝色。 （在Chrome，IE和FF上测试）

---

---

是否有内联/阻止隐藏规则？

编辑：我已将非法元素放入段落中。使用p更改div会使其全部变为蓝色。我以为我没想到，我想在返回之前我应该​​遵守规范。

Answer 1

根据HTML语法规则，p元素不能包含h3元素。此规则由浏览器强制执行：当<h3>元素打开时遇到p标记时，它们会隐式关闭p元素。 （这意味着稍后</p>代码无效并被忽略。）因此，p元素仅包含图片显示为蓝色的文字。

如果您修复了标记，例如用p元素替换div元素，事情发生了变化：

＆＃13;

＆＃13;

 div > .action{
     color: blue;

＆＃13;

    <div>
    <div class="action">
         Hey, this is a first action paragraph.
        <span> This is  a SPAN inside the action</span>
        <h3>Not a direct child, not a DIV, but a h3 block</h3>
        <div>Not a direct child but a DIV</div>
        <span> This a SPAN inside the action, AND after the closing block</span>
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

div class="action"内的所有文字都变为蓝色，除非其他样式表介入。后代元素继承文本颜色的原因。

Answer 2

＆gt;表示直接的孩子，因此您的代码会读取＆＃39;选择一个直接与div相关的.action类。取出箭头，整个p将是蓝色，你的内联级别元素也不能包含块级元素