在 a 的所有直接子級之間添加邊距<div>除了最后一個</div><div id="text_translate"><p>我希望在 Gutenberg 的博客元素之間添加一些空間。 我試過：</p><pre> .single.container &gt; *:not(:last-child) { margin-bottom: 24px; }</pre><p> 但是，這適用於不是容器的直接子元素的元素。 例如&lt;div class="wp-container-1 wp-block-column"...&gt; </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; &lt;h2&gt;Title H2&lt;/h2&gt; &lt;h3&gt;Title H3&lt;/h3&gt; &lt;h4&gt;Title H4&lt;/h4&gt; &lt;blockquote class="wp-block-quote" id="output"&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;&lt;cite&gt;&lt;strong&gt;Firstname Lastname&lt;/strong&gt; – Job at Company&lt;/cite&gt;&lt;/blockquote&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt; &lt;div class="wp-container-3 wp-block-columns"&gt; &lt;div class="wp-container-1 wp-block-column" style="flex-basis:20%"&gt; &lt;figure... &gt;&lt;/figure&gt; &lt;/div&gt; &lt;div class="wp-container-2 wp-block-column" style="flex-basis:80%"&gt; &lt;blockquote class="wp-block-quote is-style-plain" id="output"&gt;&lt;p&gt;Use the “plain” style for blockquotes.&lt;/p&gt;&lt;cite&gt;&lt;strong&gt;Firstname Lastname&lt;/strong&gt; – Job at Company&lt;/cite&gt;&lt;/blockquote&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div>

Question

我希望在 Gutenberg 的博客元素之間添加一些空間。 我試過：

.single .container > * :not(:last-child) {
    margin-bottom: 24px;
}

但是，這適用於不是容器的直接子元素的元素。 例如<div class="wp-container-1 wp-block-column"...>

 <div class="container"> <p>Lorem ipsum dolor sit amet</p> <h2>Title H2</h2> <h3>Title H3</h3> <h4>Title H4</h4> <blockquote class="wp-block-quote" id="output"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><cite><strong>Firstname Lastname</strong> – Job at Company</cite></blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <div class="wp-container-3 wp-block-columns"> <div class="wp-container-1 wp-block-column" style="flex-basis:20%"> <figure... ></figure> </div> <div class="wp-container-2 wp-block-column" style="flex-basis:80%"> <blockquote class="wp-block-quote is-style-plain" id="output"><p>Use the “plain” style for blockquotes.</p><cite><strong>Firstname Lastname</strong> – Job at Company</cite></blockquote> </div> </div> </div>

Answer 1

是你要找的：

.single .container > *:not(:last-child) {
    margin-bottom: 24px;
}

問題是你有：

.single .container > * :not(:last-child) {}
                      ^
                  This space

這就是說：

將margin-bottom應用於作為任何元素的后代的所有元素，只要它們not last-child ，與它們的兄弟姐妹相比，它們本身就是.container元素的直接子元素，它們本身就是 .container 元素的后代.single元素。

您希望將過濾器應用於所有直接子級，而不僅僅是任何元素的任何后代（通配符選擇器 [ * ]）。

如果這有意義嗎？

 .container > *:not(:last-child) { background-color: red; margin-bottom: 24px; }

 <div class="container"> <p>Lorem ipsum dolor sit amet</p> <h2>Title H2</h2> <h3>Title H3</h3> <h4>Title H4</h4> <blockquote class="wp-block-quote" id="output"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <cite><strong>Firstname Lastname</strong> – Job at Company</cite> </blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="wp-container-3 wp-block-columns"> THIS IS WHERE THE CSS IS NOT APPLIED <div class="wp-container-1 wp-block-column" style="flex-basis:20%"> <figure...></figure> </div> <div class="wp-container-2 wp-block-column" style="flex-basis:80%"> <blockquote class="wp-block-quote is-style-plain" id="output"> <p>Use the “plain” style for blockquotes.</p> <cite><strong>Firstname Lastname</strong> – Job at Company</cite> </blockquote> </div> </div> </div>

顯示了一個非常清楚的示例。