P 元素不能用作“div”元素？答案

【问题标题】：P element doesn't work as a 'div' element?P 元素不能用作“div”元素？
【发布时间】：2014-07-27 22:20:53
【问题描述】：

HTML

<div class="contents">
    <p class="alignCenter"><!-- do not align to center-->
        <img src="http://i50.tinypic.com/1zey0j8.gif" />
    </p>
</div>

CSS

.contents p{text-align: justify;}
.alignCenter{text-align: center;}

当我从 <p> 更改为 <div> 时，它可以正常工作，但为什么在图像居中时 <p> 元素不可用？

见this Fiddle。

【问题讨论】：

对这个问题的支持/反对投票存在争议。就个人而言，我觉得这很有趣。
Cross-referenced from Meta.

标签： html css

【解决方案1】：

<p> 确实是块级。你的问题是你的CSS。 <p>s 周围的 <img> 标签位于 <div id='content'> 内。在所有其他条件相同的情况下，基于 id 的 CSS 优于基于类的 CSS。

【讨论】：

@user2253835，请看看这个link about CSS Specificity
"在所有其他条件相同的情况下，基于 id 的 css 优于基于类的 css。"我在问题中没有看到任何 ID...
@BoltClock：因为代码（以及 jsfiddle）将基于 id 的 CSS 选择器更改为基于（在原始帖子之后）的类。问题还是一样：.contents p 选择器比.alignCenter 选择器更具体。
@Joachim Sauer：如果我在第一个修订版中费心点击小提琴就好了。感谢您的来信。

【解决方案2】：

将!important 添加到您的班级以强制您的选择器工作。也就是说，

.alignCenter{text-align: center !important;}

见this Fiddle。

查看 Stack Overflow 问题 What is the difference between <p> and <div>? 以查看 p 和 div 之间的区别。

【讨论】：