Question

我有一个包含<pre>元素和一些文本的段落，如下所示：

<p class="par1">
     <pre>
           this is second paragraph
           ok
           ok
     </pre>
     These text are inside the paragraph must be RED
</p>

我使用以下代码更改段落的背景颜色，但它不会影响段落，我不知道为什么。

<style>
     .par1{
           background-color:red;
           color:green;
     }
</style>

以下是整个代码：

<!doctype html>
<html>

<head>
  <title>Test id and class attribute</title>
  <style>
    .par1 {
      background-color: red;
      color: green;
    }
  </style>
</head>

<body>
  <div class="div1">
    Some text
    <h1>An important heading</h1>
    <p class="par1">
      <pre>
          this is second paragraph
          ok
          ok
      </pre>
      This text is inside the paragraph and it must be red.
    </p>
  </div>
</body>

</html>

我知道如果我使用div .div1的类，它可以正常工作，但我想知道为什么第一个不起作用。

.div1{
    background-color:red;
    color:green;
}

Answer 1

根据W3c specs say，您pre

内不能有p

4.4.1 p元素

内容模型：

短语内容。

Phrasing Content的位置：

短语内容是文档的文本，以及元素   在段落内标记该文本。短语的运行   内容形式段落。

a      abbr      area（如果它是map元素的后代）      audio      b      bdi      bdo      br      button      canvas      cite      code      data      datalist      del      dfn      em      embed      i      iframe      img      input      ins      kbd      keygen      label      map      mark      math      meter      noscript      object      output      progress      q      ruby      s      samp      script      select      small      span      strong      sub      sup      svg      template      textarea      time      u      var      video      wbr

您可以使用span并将其设置为display:block，这将使其成为块级元素

.par1 {
  background-color: red;
  color: green;
  display: block
}

<div class="div1">
  Some text
  <h1>An important heading</h1>
  <span class="par1">
    <pre>
      this is second paragraph
       ok
       ok
    </pre>
    These text are inside the paragraph must be RED
  </span>
</div>

Answer 2

正如@dippas所说，关于<pre>标签内的<p> - 标签

<p> - 标签不能包含块级元素。由于<pre>是块级元素，因此浏览器似乎会在<p> - 标记打开之前关闭<pre> - 标记（请参阅浏览器检查器）。因此，<p> - 标记

无法继承<pre>上的样式

有关有用提示的良好讨论，请参阅：

<pre> tag making browsers close paragraphs

编辑：

在W3C规范中，据说＆＃34;段落通常是一段措词内容（...）＆＃34;。

https://www.w3.org/TR/html5/dom.html#paragraphs

CSS属性不适用于包含pre元素的段落

2 个答案:

4.4.1 `p`元素

CSS属性不适用于包含pre元素的段落

2 个答案:

4.4.1 p元素

4.4.1 `p`元素