Переменный цвет CSS div

Я пытаюсь полосать зеброй свои div на своем веб-сайте, звучит достаточно просто, однако я обнаружил, что когда я добавляю заголовок между строками моих div, кажется, что заголовок подсчитывается в нечетном/четном стиле.

HTML

<div class="container">
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <h3>Title</h3>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
    <div class="row">Content</div>
</div>

CSS

.container {
    width:600px;
    margin:0 auto;
}

.row {
    line-height:24pt;
    border: solid 1px black;
}

.row:nth-child(odd) {
    background: #e0e0e0;
}

h3 {
    line-height:36pt;
    font-weight:bold;
    color:blue;
}

скрипка

Я бы подумал, что код, уже находящийся в скрипке, будет в основном игнорировать заголовок и продолжать чередование, но, похоже, он считает заголовок дочерним.


html css zebra-striping
person Andrew Morris    schedule 21.02.2013    source источник

Ответы (3)


arrow_upward
127
arrow_downward

Не используйте nth-child, используйте nth-of-type

div.container > div:nth-of-type(odd) {
    background: #e0e0e0;
}


.container {
  width: 600px;
  margin: 0 auto;
}

.row {
  line-height: 24pt;
  border: solid 1px black;
}

div.container>div:nth-of-type(odd) {
  background: #e0e0e0;
}

h3 {
  line-height: 36pt;
  font-weight: bold;
  color: blue;
}
<div class="container">
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <h3>Title</h3>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
  <div class="row">Content</div>
</div>

person j08691    schedule 21.02.2013
comment
Обратите внимание, что это продолжает считать все заголовки; если вы хотите сбросить счетчик (например, чтобы первая строка после заголовка всегда была белой), вам нужно будет использовать решение Джезена. - person Eamon Nerbonne; 21.02.2013
comment
@ j08691 j08691 Могу я узнать, почему лучше использовать nth-of-type, а не nth-child? Просто любопытно. - person Musikero31; 27.02.2018
comment
@Musikero31 Musikero31 Потому что в этом вопросе nth-child будет считать элементы div и h3, поскольку все они являются дочерними элементами родительского контейнера div. Используя nth-of-type в div в селекторе, вы эффективно отфильтровываете элементы h3. - person j08691; 27.02.2018

arrow_upward
10
arrow_downward

Вероятно, вы хотите сопоставить тип, а не дочерний элемент.

Используйте :nth-of-type, например

.row:nth-of-type(odd) {
    background: #e0e0e0;
}
person Roger Lindsjö    schedule 21.02.2013

arrow_upward
6
arrow_downward

Самое простое решение, конечно, просто обернуть элементы, которые вы хотите полосатыми.

Ваш обновленный jsFiddle.

HTML

<div class="container">
    <h3>Title</h3>
    <div class="zebra">
        <div class="row">Content</div>
        <div class="row">Content</div>
    </div>
    <h3>Title</h3>
    <div class="zebra">
        <div class="row">Content</div>
        <div class="row">Content</div>
        <div class="row">Content</div>
    </div>
    <h3>Title</h3>
    <div class="zebra">
        <div class="row">Content</div>
        <div class="row">Content</div>
        <div class="row">Content</div>
        <div class="row">Content</div>
    </div>
</div>

CSS

.row:nth-child(odd) {background: #e0e0e0;}

Имейте также в виду, что если для вас важна поддержка браузера, вы можете создать дополнительные классы. вместо этого для чередования серверной части.

person Jezen Thomas    schedule 21.02.2013
comment
это неэффективно, если он хочет добавить больше или использовать это для системы комментариев, чтобы было легче видеть отдельные комментарии... то, что он хочет, должно быть динамическим - person Ilan Biala; 21.02.2013
comment
Нет причин, по которым это не может быть динамическим. - person Jezen Thomas; 21.02.2013
comment
обертывание элементов контейнером и применение css к этому классу контейнера неэффективно, а не n-й дочерний метод. - person Ilan Biala; 24.02.2013
comment
О чем ты, черт возьми, говоришь? Сначала вы утверждаете, что мой метод не является динамическим, что совершенно неверно; теперь вы говорите, что мой метод менее эффективен. Технически это может быть правдой, а может и не быть, но в любом случае в таком малом масштабе, что делает это почти совершенно неважным. - person Jezen Thomas; 24.02.2013
comment
Вы говорите, что нужно вручную обернуть каждый другой набор, что, если он хочет использовать это для вещей с более чем тремя вещами и может расширить его, совершенно неэффективно и исключено. Не понимаю, почему вы не согласны... - person Ilan Biala; 24.02.2013