Перейти к содержанию

Рекомендуемые сообщения

Доброго времени суток. Возникла проблема с :nth-child, а именно то что есть 3 чекбокса и к каждому из них через :before присвоены разные изображения. Но работают не так как нужно. Эта вся беда на странице оформления заказа (способ доставки) здесь. Вот сам код css я изменял только его.(с tpl файлами беда, по какой то причине я не могу их изменять, вернее любые изменения не отображаются в браузере и дело не в кеше):

 

#simplecheckout_shipping .simplecheckout-block-content p:first-child:before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 74px;
	width: 130px;
	top: -34px;
	left: -22px;
	z-index:300;
	background-image: url(/image/catalog/yarninbob/new-post.png);
}



#simplecheckout_shipping .simplecheckout-block-content p:nth-child(2n):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:last-child:before{
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

я пробовал разные вариации с nth-child и в итоге почему то первые два чекбокса(а точнее <p>) считаются как 2-й элемент. или последние два как 3-й. Вообщем путаница полнейшая. Прошу помочь разобраться с этим

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, olorin сказал:

Но работают не так как нужно

тогда напишите как нужно, точнее что вы хотите с ними сделать

 

2 часа назад, olorin сказал:

с tpl файлами беда, по какой то причине я не могу их изменять

обновить модификаторы пробовали?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(4):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(3):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:nth-child(5):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(6):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, olorin сказал:

в итоге почему то первые два чекбокса(а точнее <p>) считаются как 2-й элемент. или последние два как 3-й.

Вы неправильно понимаете механизм работы nth-child. Так, как вы ожидаете, работает nth-of-type, а nth-child считает не только теги параграфа, а вообще все теги (но применяет стили только к тегам p).

У вас там теги p перемешиваются с другими тегами и они все участвуют в счётчике.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
9 часов назад, pimur сказал:

#simplecheckout_shipping .simplecheckout-block-content p:nth-child(4):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(3):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 59px;
	width: 60px;
	top: -28px;
	left: 23px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/pickup.png);
}


#simplecheckout_shipping .simplecheckout-block-content p:nth-child(5):before,
#simplecheckout_shipping .simplecheckout-block-content p:nth-child(6):before {
	position: absolute;
	content: '';
	-webkit-background-size: contain;
	background-size: contain;
	height: 51px;
	width: 96px;
	top: -22px;
	left: -3px;
	z-index: 400;
	background-image: url(/image/catalog/yarninbob/in-time.png);
}

Спасибо, помогло! Но я так и не понял почему 4,3 и 5,6? 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо всем за помощь 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.