为什么我在CSS中编写以下代码时没有改变输出？

Question

请考虑以下代码：

<p align="right"><a href="AddUser.html"><h2>Add 
User</h2></a> |  <a href="AddCustomer.html">Add Customer</a></p>

当我编写以下代码时，输​​出没有太大变化  样式标签，

p {
    font-size  : 7mm;
        font-family: Garamond;
        font-style : Normal;
}

但是如果我在h2 {}或{}中编写相同的代码，那么echange是非常明显的。 请解释为什么会如此？

Answer 1

那是因为header标签不应该在paragraph内。顾名思义，它意味着标题。

如果您想进行任何更改，请使用<span>代替<h2>。如果您删除上述代码中的<h2>，则css将正常运行。

检查fiddle

您可以<span>使用{{1}}

另外，请阅读：this

Answer 2

问题是您在段落中使用块级元素（本例中为<h2>），这是不可能的。

来自W3C reference：

  

P元素代表一个段落。它不能包含块级元素（包括P本身）。

因此，大多数网页浏览器实际上会破坏你的段落，然后，由于其余内容不在其中，因此它不会应用CSS样式。

如果您使用开发者工具（例如在Chrome中）进行检查，您会发现<h2>标记实际上是在之外

。

演示：

底线和一般建议是：不要将段落用作＆＃34; html块＆＃34;，或用于样式化内联元素的标题...使用推荐的<div>和<span>它的标签。

HTML应该是语义，而你在那里写的不是段落，也不是标题。使用正确的标签