Как получить альтернативные цвета div с чистым CSS и с поддержкой IE 7?

Question

Это HTML.

<div class="container">
            <div> background of this i need in white </div>
            <div> background of this i need in red </div>
            <div> background of this i need in white </div>
            <div> background of this i need in red </div>
        </div>

Я хочу выбрать альтернативный div без добавления class или id.

Возможно ли это только с CSS (без JavaScript) с IE 7 с поддержкой

Answer 1

IE7 не поддерживает требуемый селектор, а это :nth-child().

Обычно вы используете

.container div:nth-child(even) {
     background: red;
}

IE7 не поддерживает его К сожалению.

Вам потребуется использовать JavaScript или добавить класс в каждую нечетную или четную строку (возможно, с использованием языка на стороне сервера).

Answer 2

мы не можем выбрать каждый второй div внутри <div class="container"> [с помощью селекторов CSS2, представленных в IE7]?

Ну вроде, с селектором смежности:

.container div { background: white; }
.container div+div { background: red; }
.container div+div+div { background: white; }
.container div+div+div+div { background: red; }

Но это означает написание правила (все более громоздкой) для каждого ребенка. Выше приведен пример разметки с четырьмя дочерними элементами, поэтому он подходит для коротких элементов с фиксированным числом дочерних элементов, но не подходит для элементов с большим или неограниченным числом дочерних элементов.

Answer 3

Используйте встроенные теги стиля, например, следующие работы в IE 7 не проверено на других.

<div style="background-color:#ffff00" > Hello YOU div</div>

Answer 4

Это не может быть сделано.

Answer 5

div:nth-child(odd) { background-color:#ffffff; }
div:nth-child(even) { background-color:#ff0000; }

но я не знаю (и не могу проверить), работает ли это в IE7 - если нет, вам придется использовать разные классы для div.