跨度内的标记 p 不应用 css 样式答案

【问题标题】：Tag p inside a span doesn't apply css style跨度内的标记 p 不应用 css 样式
【发布时间】：2014-04-29 17:45:05
【问题描述】：

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

.grey {
  color:grey; 
}

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

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

“文本”显示为黑色，而“文本 2”显示为灰色。我尝试使用 div 代替 span，但不起作用。（我已经读过那个 span -> p 是不允许的）

PS：（它可以在本地与 Firefox 一起使用，但是当我在 iPad 上检查它时（这是针对 iPad 应用程序），它没有）。

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

【问题讨论】：

span 是一个中性的 inline-block 元素，它只能包含文本或 inline/inline-block 元素。 . 使用中性 div 代替以有效代码开头。然后应用你的 CSS :)
中性 div 是什么意思？我试过 div -> p 也没有用

标签： html css

【解决方案1】：

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

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

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

有关 inline 和 block 元素的更多信息，请参阅：

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

【讨论】：

【解决方案2】：

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

.grey p 
 {
    color: gray;
 }

这也行。

【讨论】：