我试图为每个偶数DIV添加不同的样式,只要它不能被3整除.所以第二个div得到填充,第四个div得到填充,但第六个被跳过.这只能用CSS吗? 我这样做的原因是我从一个双列网格捕捉到桌面上的
我这样做的原因是我从一个双列网格捕捉到桌面上的三列网格,我需要覆盖移动样式.
我不想使用JavaScript.
<div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> @include breakpoint(mobile-wide) { width: calc((2.5 / 6 * 100%) - 0rem + (2.5 / 6 * 0rem)) float: left; margin-right: calc((0.5 / 6 * 100%) + 0rem + (0.5 / 6 * 0rem)); &:nth-child(2n) { margin-right: 0; float: right; } @include breakpoint(desktop) { width: calc((3 / 12 * 100%) - 0rem + (3 / 12 * 0rem)); float: left; margin-right: calc((1.5 / 12 * 100%) + 0rem + (1.5 / 12 * 0rem)); &:nth-child(3){ margin-right: 0; float: right; } }您可以使用以下命令排除那些:not()选择器,使用:nth-child(3n 3)
div:nth-child(even):not(:nth-child(3n+3)) { padding-left: 30px; }
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>