我正在尝试为每个偶数 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>
关于CSS:nth-child(偶数)但不能被 3 整除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26533359/