Почему 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/:...

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

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

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

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

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

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

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

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

CSS

+1 ещё

Простой
Почему после изменений в css на сайте нет изменений?
- 1 подписчик
- вчера
- 121 просмотр
3

ответа
CSS

Простой
Как выровнять в гриде по горизонтали?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
CSS

+2 ещё

Средний
Как решить проблему с появлением пустого пространства под drawer из shadcn?
- 2 подписчика
- 02 окт.
- 92 просмотра
1

ответ
CSS

Простой
Как пофиксить визуальный глитч с border-radius и transparent + blur?
- 2 подписчика
- 26 сент.
- 147 просмотров
2

ответа
CSS

Простой
CSS3 как выбрать последние 4 элемента?
- 1 подписчик
- 25 сент.
- 195 просмотров
2

ответа
CSS

Простой
Как заставить css-variables перевычисляться?
- 1 подписчик
- 23 сент.
- 170 просмотров
1

ответ
HTML

+1 ещё

Простой
Как убрать линии у бейджиков в Markdown?
- 1 подписчик
- 23 сент.
- 189 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как менять картинки у карточки в списке товаров?
- 4 подписчика
- 22 сент.
- 320 просмотров
1

ответ
CSS

Простой
Как в CSS писать стили исходя из ширины себя как @container?
- 2 подписчика
- 18 сент.
- 158 просмотров
1

ответ
HTML

+4 ещё

Средний
Кривое отображение сайта на iOS-устройствах?
- 2 подписчика
- 13 сент.
- 407 просмотров
1

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

Frontend-разработчик Vue.js 3

Лига Роботов • Новосибирск

от 65 000 до 85 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 80 000 до 120 000 ₽

Fullstack разработчик

Love.ru • Пермь

от 100 000 ₽

.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 отображает?

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

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

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