什麼是最簡單的方法來選擇flexbox容器的所有子元素,並給他們所有相同的餘量,例如?最簡單的方法來選擇Flex容器的所有元素?
例子:
<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text</div>
<p class="smalltext">Some small text</p>
</div>
什麼是最簡單的方法來選擇flexbox容器的所有子元素,並給他們所有相同的餘量,例如?最簡單的方法來選擇Flex容器的所有元素?
例子:
<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text</div>
<p class="smalltext">Some small text</p>
</div>
要選擇直接兒童(1級兒童柔性容器):
.flexboxcontainer {
display: flex;
}
.flexboxcontainer>* {
/*Select only 1 level children */
padding: 20px;
border: 2px solid black;
}
<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text
<h3>Random stuff</h3>
</div>
<p class="smalltext">Some small text
<span>Additional text</span>
</p>
</div>
要選擇所有兒童,即後代(柔性容器的所有平兒) :
.flexboxcontainer {
display: flex;
}
.flexboxcontainer * {
/*Select all level children */
padding: 20px;
border: 2px solid black;
}
<div class="flexboxcontainer">
<h1>Headline</h1>
<p>Some Text</p>
<div>Some more text
<h3>Random stuff</h3>
</div>
<span class="smalltext">Some text
<p>More text</p>
</span>
</div>
.flexboxcontainer > * {
/* You properties */
}
它無關,與彎曲 - 你可以選擇與上述選擇元素的所有直接子。
對於直接孩子,這將是.flexboxcontainer > * { ... }
,爲所有兒童.flexboxcontainer * { ... }
'.flexboxcontainer> *' –
.flexboxcontainer *使用CSS內的所有元素選擇和.flexboxcontainer> *選擇爲了無小孩。 –