有沒有一種CSS方法來知道一個元素是否已經包裝到一個新的行？

Question

如果我在一行上有許多行內塊元素，我希望能夠以不同方式對已包裝到下一行的元素進行樣式設置。

例如

<div class='wrapper'> 
    <div style='display: inline-block; width: 500px'>...</div> 
    <div style='display: inline-block; width: 500px'>...</div> 
</div> 

所以，當瀏覽器的寬度< 1000，第二個孩子<div>可以有不同的造型。

我知道我可以在js中完成，但我試圖避免它。我也知道我可以使用媒體查詢，但是我擔心最小寬度截止可能與<div>的換行（我不知道它們的確切大小）完全相同。

Answer 1

CSS僅提供一個::first-line僞元素用於標識一行行框中的第一行。它不會爲任何其他行提供任何僞元素，也不會爲基於它們所在行的行匹配內聯級元素提供任何僞類。

您可以使用::first-line以不同的風格元素的第一行（即不是造型元素的第二行，應用這些樣式的所有線條和風格原定的第一行）在有限的，但這隻適用一組屬性。