跨度内的标记p不适用于css样式

Question

我遇到了样式问题。我的代码是这样的：

.grey {
  color:grey; 
}

<span class="grey">
   <p align="justify"><b>Text</b></p>
</span>

<span class="grey">
  Text 2
</span>

“文字”显示为黑色，而“文字2”显示为灰色。我尝试使用div而不是span，但不起作用。 （我读过那个跨度 - ＆gt; p是不允许的）

PS :(它在Firefox本地工作，但是当我在iPad上检查它时（这是用于iPad应用程序），它没有。）

有没有办法强制p应用跨度的样式？

Answer 1

<span>是内嵌级元素，不能放在<p>元素周围，因为段落<p>是块级元素。规则是块级别元素可以包含任意数量的内联或块元素。 内联级别元素只能包含内嵌元素。

您的HTML应该是以下内容，它将起作用：http://jsfiddle.net/amyamy86/RENbN/

<div class="grey">
   <p align="justify"><b>Text</b></p>
</div>

<span class="grey">
  Text 2
</span>

有关内联和块元素的详细信息，请参阅：

• display:inline vs display:block
• http://www.impressivewebs.com/difference-block-inline-css/

如果你仍然看到黑色的“文字”主要是因为有一些CSS选择器具有更高的特异性并覆盖了你的.grey选择器。

Answer 2

另一个解决方法我发现有效（最佳解决方案是更改div的跨度），添加CSS：

.grey p 
 {
    color: gray;
 }

这也可以。