1. 程式人生 > >CSS3 :nth-child() 選擇器

CSS3 :nth-child() 選擇器

最近做專案的時候,需要修改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;}