这两者之间是否符合标准？
<p>Text text text ...
<ol>
<li>First element</li>
</ol>
</p>
<p>
Other text text ...
</p>
<p>
Text text text ...
</p>
<ol>
<li>First element</li>
</ol>
<p>
Other text text ...
</p>
来自http://webdesign.about.com/od/htmltags/p/aadivtag.htm
在HTML 4中,DIV元素不能位于另一个块级元素内,就像P元素一样.但是,在HTML5中,DIV元素可以在里面找到,并且可以包含其他流内容元素,如P和DIV.
我在表格中有这样的东西
<p> <label...> <input...> </p>
但是当Rails自动生成一个包含输入的error_explanation div时,一个段落变为两个,我在Firebug中看到了这个:
<p> <label...> </p> <div...> <input...> </div> <p> </p>
另外,如果我只是添加一个简单的
<p> <div> test </div> </p>
发生同样的问题(JSFiddle),它在DOM中呈现为
<p> </p> <div> test </div> <p> </p>
为什么？
更新:我通过电子邮件发送了文章的作者,并做了相应的更改.
获取一个空HTML,输入此内容并在Google Chrome上查看其源代码:
<p><div> </div>WHY?</p>
如果你像我一样做了,你会在源代码中看到这个:
<html>
<head></head><body><p> </p><div> </div>WHY?<p></p>
</body></html>
以防万一,这是使用jsbin的演示.在该链接中,您会看到:
[repeating P]
WHY?
[repeating P]
我在其上添加了这个jQuery:
$("p").html("[repeating P]");
<div>从中移除整体,一切都恢复正常.这个小的奇怪的意外行为在添加更多的东西时是一致的<div>,它可能是一个<span>或我想在那里的任何东西.HTML格式是否合格并不重要.
谁知道为什么？
在下面的例子中,有谁能告诉我"Heading"和"Heading 2"是如何被涂成红色的？http://jsfiddle.net/zxfNU/1/
HTML
<div id="root">
<p>
<p>Test 1</p>
<h3>Heading</h3>
<h3>Heading 2</h3>
</p>
</div>
<h3>Heading 3</h3>
CSS
div#root > h3
{
color: red;
}
是不是CSS只选择一个h3元素,如果它在div下,实际上它是在p元素下？
我似乎无法设计图中的图像:
HTML:
<article>
<p>
<figure class="float-right">
<img src="images/castle1.jpg">
<figcaption>The castle by day</figcaption>
</figure>
</p>
</article>
CSS:
article p figure img {
height: 330px;
width: 500px;
float: right;
margin: 10px 20px 20px 20px;
background-color: green;
border-radius: 4px;
}
您可以在此处查看该网站
我的理解是，样式化的元素display:inline-block将在内部布局为一个块，但在它们所在的任何容器中被视为内联元素。如果它们位于一个li或一个div或一堆其他事物中，这似乎是正确的；但如果它们在里面，那就p不同了，原因我不清楚。考虑以下示例：
<!DOCTYPE html>
<p>Test1<table style="display:inline-block"><tr><td>x</td></tr></table>Test1</p>
<div>Test2<table style="display:inline-block"><tr><td>x</td></tr></table>Test2</div>
<p>Test3<span style="display:inline-block"><table><tr><td>x</td></tr></table></span>Test3</p>
<div>Test4<span style="display:inline-block"><table><tr><td>x</td></tr></table></span>Test4</div>
这里，前两行有一个表，display:inline-block其样式分别位于 ap和 a内部div。接下来的两个表在span具有内联块样式的 a 内，同样在 ap和 a内div。在测试 2 和测试 4 的div情况下，整个事情都显示在一行上（正如我对所有这些情况所期望的那样）。在 Test1 中，假定的内联块元素前面有一个换行符，而在 Test3 中，假定的内联块元素前面和后面都有一个换行符。
为什么？
下面是一段简单的HTML/CSS代码,我在其中放入了两个URL:
使用儿童选择器意味着只有Google网址应为红色.
但在实施中,不知何故双方谷歌和Bing的网址是红色的.(另外,有趣的是,当我删除<h1>Text</h1>元素时,只有Google网址的颜色为红色.)
是什么原因？
这是HTML提取:
<div class="mydiv">
<a href="http://www.google.com">Google</a>
<p>
<h1>Text</h1>
<a href="http://www.bing.com">Bing</a>
</p>
</div>
而CSS提取:
.mydiv > a {
color:red;
}