css3 n вопрос ребенка - PullRequest
Новая
       17

css3 n вопрос ребенка

1 голос
/ 21 апреля 2010

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

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

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

Это работает. Единственная проблема состоит в том, что в строке 4 элемента (четный #), следующая строка будет идентичной, что будет отображать цвета фона для каждого 1-го и 3-го элементов списка в строке. Это не тот эффект, которого я хочу достичь. Я хочу, чтобы цвета фона чередовались, создавая эффект сетки. Что такое правильный CSS для этого (подумайте, доска для проверки). Спасибо!

1 Ответ

2 голосов
/ 21 апреля 2010

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

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 ​​элементов, поэтому вам нужно 8n в селекторе. И из этих восьми вы хотите, чтобы 0-й, 2-й, 5-й и 7-й имели альтернативный цвет.

РЕДАКТИРОВАТЬ: я попробовал этот 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>
...