我有这种风格!
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
会使其全部变为蓝色。我以为我没想到,我想在返回之前我应该遵守规范。
答案 0 :(得分:1)
根据HTML语法规则,p
元素不能包含h3
元素。此规则由浏览器强制执行:当<h3>
元素打开时遇到p
标记时,它们会隐式关闭p
元素。 (这意味着稍后</p>
代码无效并被忽略。)因此,p
元素仅包含图片显示为蓝色的文字。
如果您修复了标记,例如用p
元素替换div
元素,事情发生了变化:
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;
div
class="action"
内的所有文字都变为蓝色,除非其他样式表介入。后代元素继承文本颜色的原因。
答案 1 :(得分:-1)
&gt;表示直接的孩子,因此您的代码会读取&#39;选择一个直接与div相关的.action类。取出箭头,整个p将是蓝色,你的内联级别元素也不能包含块级元素