Несколько псевдослучайных CSS-классов

253
29

Каков правильный синтаксис CSS для применения нескольких псевдо классов к селектору. Я хотел бы вставить "," после каждого элемента в списке, кроме последнего. Я использую следующий css:


ul.phone_numbers li:after {
content: ",";
}

ul.phone_numbers li:last-child:after {
content: "";
}


Это отлично работает на FF3, Chrome и Safari 3. IE7 не работает, потому что он не поддерживает: после (как и ожидалось). В IE 8 это отображается с запятой после каждого li, включая последний. Это проблема с IE8 или мой синтаксис неверен? Это нормально, если он не работает в IE8, но я хотел бы знать, что такое правильный синтаксис.

спросил(а) 2021-01-19T19:12:53+03:00 9 месяцев назад
1
Решение
314

:last-child является псевдоклассом, тогда как :after (или ::after в CSS3) является псевдоэлементом.


Чтобы процитировать стандарт:

Псевдо-классы разрешены в любом месте селекторов, тогда как псевдоэлементы могут быть добавлены только после последнего простого селектора селектора.



Это означает, что ваш синтаксис верен в соответствии с CSS2.1 и CSS3, а также, то есть IE8 все еще сосет;)

ответил(а) 2021-01-19T19:12:53+03:00 9 месяцев назад
138

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

ul.phone_numbers li + li:before {
content: ",";
}

ответил(а) 2021-01-19T19:12:53+03:00 9 месяцев назад
92

Вы можете обойти это, указав еще один тег внутри <li/> и примените к нему :after. Таким образом, вы будете применять :last-child и :after к различным элементам:


ul.phone_numbers li > span:after {
content: ",";
}

ul.phone_numbers li:last-child > span:after {
content: "";
}

ответил(а) 2021-01-19T19:12:53+03:00 9 месяцев назад
65

Нет проблем с вложением псевдоселевых селекторов, пока применяемые правила соответствуют конкретному элементу в DOM-дереве.
Я хочу повторить возможности стилизации с помощью селекторов псевдокласс из сайта w3.
Это означает, что вы также можете делать такие вещи, как:


.ElClass > div:nth-child(2):hover {
background-color: #fff;
/*your css styles here ... */
}

ответил(а) 2021-01-19T19:12:53+03:00 9 месяцев назад
65

IE8 не поддерживает last-child:( Они сосредоточены на сортировке поддержки CSS 2.1. Похоже, что Microsoft не приняла Gecko или Webkit, но я не знаю.


http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses

ответил(а) 2021-01-19T19:12:53+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема