假设我有:
<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?
最佳答案
要在段落周围创建一个框并阻止引号元素,同时将其他同级元素留在外面,请创建一个 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)的情况下执行此操作,则需要做更多的额外样式(这将完全取决于页面的其余部分)以将每个元素周围的边框连接起来形成一个大盒子。
关于html - 如果 p 和 blockquote 元素都存在,则在它们周围放置方框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52434648/