Loading... ``` <style> .test-container { font-family: "等线"; font-weight: bold; } .test-child { height: 40px; margin: 10px; width: calc(50px * 1); background-color: red; transition: 1s; } .test-child-1 { width: calc(50px * 6); } .test-child-2 { width: calc(50px * 5); } .test-child-2::after { padding-left: 100%; font-size: calc(50px * 1); content: "，"; } .test-child-3 { width: calc(50px * 4); } .test-child-3::after { padding-left: 100%; font-size: calc(50px * 1); content: "，"; } .test-child-4 { width: calc(50px * 7); } .test-child-5 { width: calc(50px * 2); } .test-child:nth-child(2n-1) { background-color: red; color: red; } .test-child:nth-child(2n) { background-color: blue; color: blue; } </style> <div class="test-container"> <div class="test-child test-child-1"></div> <div class="test-child test-child-2"></div> <div class="test-child test-child-3"></div> <div class="test-child test-child-4"></div> <div class="test-child test-child-5"></div> </div> ``` <style> .test-container { font-family: "等线"; font-weight: bold; } .test-child { height: 40px; margin: 10px; width: calc(50px * 1); background-color: red; transition: 1s; } .test-child-1 { width: calc(50px * 6); } .test-child-2 { width: calc(50px * 5); } .test-child-2::after { padding-left: 100%; font-size: calc(50px * 1); content: "，"; } .test-child-3 { width: calc(50px * 4); } .test-child-3::after { padding-left: 100%; font-size: calc(50px * 1); content: "，"; } .test-child-4 { width: calc(50px * 7); } .test-child-5 { width: calc(50px * 2); } .test-child:nth-child(2n-1) { background-color: red; color: red; } .test-child:nth-child(2n) { background-color: blue; color: blue; } </style> <div class="test-container"> <div class="test-child test-child-1"></div> <div class="test-child test-child-2"></div> <div class="test-child test-child-3"></div> <div class="test-child test-child-4"></div> <div class="test-child test-child-5"></div> </div> 最后修改：2022 年 08 月 01 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏