html - 如果 p 和 blockquote 元素都存在，则在它们周围放置方框

Question

假设我有:

<div class='header'>...</div>

包含多个元素，具体取决于文件。

在某些文件中它看起来像:

<div class='header'>
  <p>
    ...
  </p>
 </div>

在其他情况下它可能看起来像:

<div class='header'>
  <p>
    ...
  </p>
  <blockquote>
    ...
  </blockquote>
  <h1>
    ...
  </h1>
 </div>

我想创建一些 css 代码，用一个框围绕所有 <p>和 <blockquote>此 .header 中存在的元素(不是每个单独的框)(但不包括此框中的 h1 元素)。这是可能的还是我必须为每个场景编写单独的 css？

Answer 1

要在段落周围创建一个框并阻止引号元素，同时将其他同级元素留在外面，请创建一个 div 并将它们放在其中。然后向该 div 添加边框:

.header .container {
  border: 1px solid #000;
}

<div class="header">
  <div class="container">
    <p>Paragraph</p>
    <blockquote>Block quote</blockquote>
  </div>
  <h1>H1</h1>
</div>

如果您想在不创建另一个 div(100% CSS)的情况下执行此操作，则需要做更多的额外样式(这将完全取决于页面的其余部分)以将每个元素周围的边框连接起来形成一个大盒子。