Каков правильный синтаксис 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, но я хотел бы знать, что такое правильный синтаксис.
:last-child является псевдоклассом, тогда как :after (или ::after в CSS3) является псевдоэлементом.
Чтобы процитировать стандарт:
Псевдо-классы разрешены в любом месте селекторов, тогда как псевдоэлементы могут быть добавлены только после последнего простого селектора селектора.
Это означает, что ваш синтаксис верен в соответствии с CSS2.1 и CSS3, а также, то есть IE8 все еще сосет;)
Вы можете использовать соседний селектор селектора:
ul.phone_numbers li + li:before {
content: ",";
}
Вы можете обойти это, указав еще один тег внутри <li/> и примените к нему :after. Таким образом, вы будете применять :last-child и :after к различным элементам:
ul.phone_numbers li > span:after {
content: ",";
}
ul.phone_numbers li:last-child > span:after {
content: "";
}
IE8 не поддерживает last-child:( Они сосредоточены на сортировке поддержки CSS 2.1. Похоже, что Microsoft не приняла Gecko или Webkit, но я не знаю.
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses
Нет проблем с вложением псевдоселевых селекторов, пока применяемые правила соответствуют конкретному элементу в DOM-дереве. Я хочу повторить возможности стилизации с помощью селекторов псевдокласс из сайта w3. Это означает, что вы также можете делать такие вещи, как:
.ElClass > div:nth-child(2):hover {
background-color: #fff;
/*your css styles here ... */
}