CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css3 – 如何根据元素的弹性框顺序设置元素样式大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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/

大佬总结

以上是大佬教程为你收集整理的css3 – 如何根据元素的弹性框顺序设置元素样式全部内容,希望文章能够帮你解决css3 – 如何根据元素的弹性框顺序设置元素样式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。