2017-12-18 455 views
0

什麼是最簡單的方法來選擇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> *' –

+0

.flexboxcontainer *使用CSS內的所有元素選擇和.flexboxcontainer> *選擇爲了無小孩。 –

回答

1

要選擇直接兒童(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>

1
.flexboxcontainer > * { 
    /* You properties */ 
} 

它無關,與彎曲 - 你可以選擇與上述選擇元素的所有直接子。

1

對於直接孩子,這將是.flexboxcontainer > * { ... },爲所有兒童.flexboxcontainer * { ... }

相關問題