css3 nth child question

Я разрабатываю макет шириной 960 пикселей с неупорядоченным списком. Каждый элемент списка имеет ширину 240 пикселей, поэтому 4 элемента списка подходят по горизонтали в строке. У меня есть около 20 строк на странице ....css3 nth child question

Я хочу, чтобы каждый другой элемент списка, чтобы иметь фон #ececec, так что мой CSS будет:

ul li:nth-child(2n+2){ 
    background-color:#ececec; 
}

Это работает. Единственная проблема состоит в том, что в строке есть четыре элемента (четное #), следующая строка будет одинаковой, что позволяет отображать цвета фона на каждом первом и третьем элементах списка подряд. Я не хочу этого добиться. Я хочу, чтобы цвета фона чередуются, создавая сетчатый эффект. Каков правильный css для этого (подумайте о контрольной доске). Благодаря!

источник

2010-04-20 JCHASE11

Если вы хотите шахматную доску, а затем использовать:

ul li:nth-child(8n+1), ul li:nth-child(8n+3), ul li:nth-child(8n+6), ul li:nth-child(8n+8) { 
    background-color:#ececec; 
}

Узор повторяется каждые две строки, которые в вашем случае каждые 8 элементов, так что вам нужно 8л в селекторе. И из тех восьми, вы хотите, чтобы 0, 2, 5 и 7 имели альтернативный цвет.

EDIT: Я попробовал этот HTML, и получил шахматную в Firefox 3.5.9:

<html> 
<head> 
<style> 
#container { 
    width: 960px; 
    border: 1px solid black; 
} 
span { 
    border: 1px solid gray; 
    display: block; 
    width: 180px; 
    float: left; 
    padding: 10px; 
    margin: 10px; 
    background: blue; 
} 
span:nth-child(8n+1), span:nth-child(8n+3), span:nth-child(8n+6), span:nth-child(8n+8) { 
    background: red; 
} 
</style> 
<body> 
<div id='container'> 
    <span>One</span> 
    <span>Two</span> 
    <span>Three</span> 
    <span>Four</span> 
    <span>Five</span> 
    <span>Six</span> 
    <span>Seven</span> 
    <span>Eight</span> 
    <span>Nine</span> 
    <span>Ten</span> 
    <span>Eleven</span> 
    <span>Twelve</span> 
    <span>Thirteen</span> 
    <span>Fourteen</span> 
    <span>Fifteen</span> 
    <span>Sixteen</span> 
    <span>Seventeen</span> 
    <span>Eighteen</span> 
</div>

источник

2010-04-20 21:27:43

Counter-интуитивно, 'п-child' в 1 на основе. – bobince

Возможно, это не работает. все еще загружает то же самое. собираюсь дать ему еще несколько попыток – JCHASE11

Я пробовал оба предложения с любой возможной комбинацией и ее все еще не работает ... любые идеи? – JCHASE11

css3 nth child question

ответ

Смежные вопросы