Question

我的意思是，想象一下这段代码：

<!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
      <style>
           p{
                font-size:2em;
            }


          li{
               font-size:2em;
          }
      </style>

         <p>First Paragraph
             <ul>
                    <li>First list element</li>
                    <li>Paragraph inside a list</li>
                    <li>Third list element</li>
            </ul>
         </p>
        <p>Second Paragraph</p>

      </body>
    </html>

结果是： enter image description here

如您所见，元素不会级联。我的意思是，p和li都与font-size的2em保持一致。

如果我交换

，也会发生同样的情况

<p>First Paragraph</p>

的

<p><p>First Paragraph</p></p>

结果保持不变。 <{1}}元素中的另一个p元素也不会级联。

但如果我这样做：

结果是：

enter image description here

所以......如果一个段落元素在一个列表元素中（第二个元素的字体大小是2em x 2em），则会发生级联，但相反的情况并非如此。为什么呢？

Answer 1

“另一个p元素中的p元素也不会级联。”

这是因为块元素（在这种情况下为p元素）不能在p元素内。

当您使用<p><p>First Paragraph</p></p>时，浏览器会结束第二段开始的第一段，并从额外的结束标记创建第三段：

<p></p>
<p>First Paragraph</p>
<p></p>

当您尝试将列表放入段落时也会发生同样的情况。第一段结束于列表开始的位置，因为列表是一个块元素，因此列表永远不在段落内。

Answer 2

font-size不会复合，因为HTML的规则声明您不能将块级元素嵌套在段落中（包括p本身）。如果您在嵌套的p示例中查看呈现的HTML，您会看到它实际上看起来像：

<p></p>
<p>First Paragraph</p>
<p></p>

CSS：为什么选择＆＃34; p＆＃34;元素级联内部＆＃34; li＆＃34;元素，但相反不会发生？

2 个答案: