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

Каков правильный синтаксис 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, но я хотел бы знать, что такое правильный синтаксис.

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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