Чередование цветов в строке на div с использованием только css

Я хочу знать, возможно ли это с помощью только CSS:

Black White
White Black
Black White
White Black

имя представляет цвет фона, который я хочу. В этом jsfiddle, Я жестко закодировал его, чтобы показать, что именно я хочу, но количество divs будет динамическим, поэтому я не знаю, сколько их будет.

как этого достичь?

7
css css-selectors css3

1 ответов

вам понадобится :nth-child псевдо-класс здесь.

Вариант 1

этот первый вариант требует использования 2 селекторов

первый обрабатывает стиль divs в левом столбце сетки. Нумерация этих дает нам 1,5,9,13,... который вы можете выразить как 4n-3 (4*1-3=1, 4*2-3=5, 4*3-3=9, 4*4-3=13, ...). Это также может быть выражено как 4n+1, если вы предпочитать.

второй селектор, для обработки стиля divs в правой колонке, является более простым, так как это просто каждый четвертый div, который может быть выражен как 4n (4*1=4, 4*2=8, 4*3=12, 4*4=16, ...).

div{
  background:#fff;
  display:inline-block;
  height:100px;
  width:50%;
}
div:nth-child(4n-3),div:nth-child(4n){
  background:#000;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

вариант 2

этот второй вариант достигает того же результата с помощью одного селектора с помощью отрицание псевдо класс :not().

обратный выбор к этому в варианте можно выразить используя 4n-1 и 4n-2 (или 4n+3 и 4n+2) поэтому мы выберем все divs, за исключением тех, которые соответствуют этим выражениям.

div{
    background:#fff;
    display:inline-block;
    height:100px;
    width:50%;
}
div:not(:nth-child(4n-1)):not(:nth-child(4n-2)){
    background:#000;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

FURHTER ЧТЕНИЕ НА MDN

в сторону

я изо всех сил пытался придумать одно выражение CSS в соответствии с этим, но не смог. Если кто-нибудь добьется успеха в этом, пожалуйста, дайте мне знать. Последовательность, которую мы ищем, чтобы соответствовать:1,4,5,8,9,12,13,16,17,20,...,2n-(n%2)

15