风格没有jQuery的

当前情况下每4个可选的奇/偶第n个孩子（2N）风格没有jQuery的

enter image description here

我想

enter image description here

请参阅下面的代码片段修改的内容。希望这会帮助你。

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的解决方案。

来源

2015-04-02 w3debugger

使用的类没有选择，我猜？ – sinisake 2015-04-02 20:17:33

不，我可以使用类或一堆css选择器来解决它，但我想要干净的解决方案。我知道这并不容易，因为我从4天开始工作:) – w3debugger 2015-04-02 20:19:32

基本上你正在使用重复的组有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>

来源

2015-04-02 20:22:21 j08691

伟大的兄弟，非常感谢:) – w3debugger 2015-04-02 20:25:12

啊只是做了这一点，并看到了基本相同的答案 - 我用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>

来源

2015-04-02 21:12:48

风格没有jQuery的

回答

相关问题