跨度内的标记 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，但不起作用。（我读过那个跨度 -> p 是不允许的）

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

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

Answer 1

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

您的 HTML 应该如下所示，它会起作用：http : //jsfiddle.net/amyamy86/RENbN/

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

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

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

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