CSS3 :nth-child() 选择器

最新推荐文章于 2025-10-09 23:03:32 发布

原创最新推荐文章于 2025-10-09 23:03:32 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种通过修改jqGrid插件的CSS样式实现模态框布局优化的方法，使其能够根据条目数量自动调整为单列或多列显示，适用于需要定制化前端展示效果的场景。

最近做项目的时候，需要修改jqGrid源代码来修改外观，把模态框（弹出框）从原来的竖直显示变成多列显示，而jqGrid插件是自动根据绑定数据来生成前端样式的，由于对CSS并不熟悉，经过一整天才相处了解决办法

nth-child()用于选择子元素
这里写图片描述

这是我原创的加入jqGrid源代码的css样式，会根据弹出框的显示条目数来自动决定是否浮动显示（即是直接垂直显示，还是分两列显示）

.ui-jqdialog-content table tr {float:left;padding-left:10px;padding-right:10px}
.ui-jqdialog-content table tr :nth-child(n+9):nth-child(odd):nth-child(n-9){float:left;}
.ui-jqdialog-content table tr :nth-child(n+9):nth-child(even):nth-child(n-9){float:right;}