有没有一种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以不同的风格元素的第一行（即不是造型元素的第二行，应用这些样式的所有线条和风格原定的第一行）在有限的，但这只适用一组属性。