Почему IE не отображает :nth-child(2), а Chrome отображает?

Question

sorry_i_noob @sorry_i_noob

CSS

Почему IE не отображает :nth-child(2), а Chrome отображает?

Здравствуйте. Есть такой код.
HTML:

<div class="parent">
	<div class="col-1">
		<div class="elem">
			col-1 Текст 1
		</div>
		<div class="elem">
			col-1 Текст 2
		</div>
		<div class="elem">
			col-1 Текст 3
		</div>
		<div class="elem">
			col-1 Текст 4
		</div>
		<div class="elem">
			col-1 Текст 5
		</div>
	</div>
</div>

CSS:

.elem {
	border: 1px solid black;
	background-color: green;
}

.col-1 :nth-child(2) {
	background-color: #fff;
}

Вот результат в Chrome:

Вот результат в IE:

При том, что на developer.mozilla.org написано, что это свойство поддерживается в IE:
https://developer.mozilla.org/en-US/docs/Web/CSS/:...

Почему же тогда не отображается?

Вопрос задан более трёх лет назад
90 просмотров

9 комментариев

Подписаться 1 Простой 9 комментариев

Lynn «Кофеман» @Lynn

Версия ie какая?

Написано более трёх лет назад
RAX7 @RAX7

.col-1 :nth-child(2) // <- пробел убери перед :

Написано более трёх лет назад
sorry_i_noob @sorry_i_noob Автор вопроса

Алексей Тен,

Написано более трёх лет назад
sorry_i_noob @sorry_i_noob Автор вопроса

RAX7, если убрать, то свойство применится не к дочерним элементам, а к самому ".col-1". А мне это не надо.

Написано более трёх лет назад
RAX7 @RAX7
sorry_i_noob,
.col-1:nth-child(2) .elem { background-color: #fff; }
Написано более трёх лет назад
Антон Усачев @rockfeeler
sorry_i_noob, тогда в чем проблема написать так:
.col-1 .elem:nth-child(2) { background-color: white; }
Написано более трёх лет назад
Lynn «Кофеман» @Lynn

А doctype написан?

Написано более трёх лет назад

sorry_i_noob @sorry_i_noob Автор вопроса

Алексей Тен,

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>111</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
	<div class="col-1">
		<div class="elem">
			col-1 Текст 1
		</div>
		<div class="elem">
			col-1 Текст 2
		</div>
		<div class="elem">
			col-1 Текст 3
		</div>
		<div class="elem">
			col-1 Текст 4
		</div>
		<div class="elem">
			col-1 Текст 5
		</div>
	</div>
</div>
</body>
</html>

Написано более трёх лет назад

Антон Усачев @rockfeeler

sorry_i_noob, странно. На скринах title="test", а в коде – "111". Ты точно тот код смотришь в своем браузере? Потому что я проверил у себя на той же версии Осла, и у меня все работает нормально.

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Простой
Почему нет взаимосвязи между файлами HTML, CSS, JS?
- 1 подписчик
- 7 часов назад
- 84 просмотра
0

ответов
CSS

+1 ещё

Простой
Почему не работает анимация при маленьком окне?
- 1 подписчик
- 22 часа назад
- 40 просмотров
1

ответ
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 26 нояб.
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 230 просмотров
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 116 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 127 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 86 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 66 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 103 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

move2usajobs LLC • Лос-Анджелес

от 2 000 до 4 000 $

Чат бот телеграмм-python

28 нояб. 2024, в 05:21

2000 руб./за проект

Проверить программу Python

28 нояб. 2024, в 05:18

500 руб./за проект

Разработка простого C++ Плагина After Effects

28 нояб. 2024, в 03:51

3500 руб./за проект

.col-1 :nth-child(2) // <- пробел убери перед :
RAX7, если убрать, то свойство применится не к дочерним элементам, а к самому ".col-1". А мне это не надо.
sorry_i_noob,
.col-1:nth-child(2) .elem { background-color: #fff; }
sorry_i_noob, тогда в чем проблема написать так:
.col-1 .elem:nth-child(2) { background-color: white; }
Алексей Тен,

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>111</title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="col-1"> <div class="elem"> col-1 Текст 1 </div> <div class="elem"> col-1 Текст 2 </div> <div class="elem"> col-1 Текст 3 </div> <div class="elem"> col-1 Текст 4 </div> <div class="elem"> col-1 Текст 5 </div> </div> </div> </body> </html>
sorry_i_noob, странно. На скринах title="test", а в коде – "111". Ты точно тот код смотришь в своем браузере? Потому что я проверил у себя на той же версии Осла, и у меня все работает нормально.

Answer 1 · 2019-07-23 14:56:50

У меня был включен режим совместимости в IE. Я отключил его, и все стало корректно отображаться. Всем спасибо за попытки помочь.

Почему IE не отображает :nth-child(2), а Chrome отображает?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт