当前情景
我想要什么
请参阅以下代码段进行修改。希望这会对你有所帮助。
ul {
font-size: 0;
width: 400px;
}
li {
width: 100px;
height: 100px;
display: inline-block;
}
li:nth-child(odd) {
background: yellow;
}
li:nth-child(even) {
background: orange;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
如果可能,我需要纯CSS解决方案。
答案 0 :(得分:8)
基本上你正在使用偏移量为8的重复组,所以你可以使用它:
ul {
font-size: 0;
width: 400px;
}
li {
width: 100px;
height: 100px;
display: inline-block;
background: yellow;
}
li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
background: orange;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
答案 1 :(得分:1)
啊只是做了这个并且看到了基本相同的答案 - 我使用了8n并减去了。
ul {
width: 400px;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
li {
width: 100px;
height: 55px;
padding: 0;
margin: 0;
background-color: #FF8E00;
list-style-type: none;
text-align: center;
display: inline-block;
padding-top: 45px;
font-family: Arial;
font-size: 18px;
font-weight: bold;
color: #777;
}
li:nth-child(odd),
li:nth-child(8n),
li:nth-child(8n - 2) {
background-color: #ff0;
}
li:nth-child(8n - 3),
li:nth-child(8n - 1) {
background-color: #FF8E00;
}
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>