儿童组合子和跨度

时间:2014-11-12 20:41:56

标签: html css

我有这种风格!

 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上测试)


enter image description here


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

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

2 个答案:

答案 0 :(得分: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"内的所有文字都变为蓝色,除非其他样式表介入。后代元素继承文本颜色的原因。

答案 1 :(得分:-1)

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