我在DIV中有一些元素,根据屏幕的大小重新排序.我想根据它们的弹性盒顺序不同地设置每个元素的样式.因为媒体查询在框架内部,所以我宁愿不编写自己的媒体查询来执行此操作,因为如果框架更改了媒体查询的断点,我不想记得更改我的媒体查询.我尝试使用兄弟选择器,但显然这仅适用于原始标记中元素的顺序,而不适用于弹性框渲染顺序.有没有办法根据元素在渲染DOM中的显示顺序来设置元素的样式？
解决方法
正如评论中提到的,你将无法使用nth-child,因为样式将应用于实际DOM的顺序,而不是渲染的DOM.
您必须在标记中添加额外的类才能执行此操作.
因此,不是使用nth-child重新排序,而是使用额外的类重新排序.
<div class="flexGrid"> <div class="flexGrid__item flexGrid__item--alpha"></div> <div class="flexGrid__item flexGrid__item--bravo"></div> <div class="flexGrid__item flexGrid__item--charlie"></div> <div class="flexGrid__item flexGrid__item--delta"></div> </div>
这个小提琴的更多细节：
https://jsfiddle.net/pua5u8a4/1/
