風格沒有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的

回答

相關問題