Можно ли использовать несколько псевдоэлементов в css?

Я хочу сделать меню, в котором каждый элемент отделяется с ·. Для этого я использую 

menu li:before {
    content: "· ";
}

это здорово, но он также генерирует точку перед первым элементом. Поэтому я хотел бы использовать :first-child псевдо-класса. Могу я это сделать?

16
css pseudo-class pseudo-element

3 ответов

конечно, вы можете -http://jsfiddle.net/WQBxk/

p:before {
    content: "BEFORE ";
    display: block;
}

p:first-child:before {
    content: "1ST";
    display: block
}
​

плохо-он не будет работать в IE7 и ниже. Не из-за нескольких псевдо-селекторов, а из-за не поддерживаемых :before - http://kimblim.dk/css-tests/selectors/

только что проверил в IE8 - работает хорошо.

16

вот рабочая скрипка:http://jsfiddle.net/surendraVsingh/zRrLF/

<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>

</ul>​

CSS:

li:before{content:'. ';}
li:first-child:before{content:'@ ';}
1

конечно, вы можете использовать псевдо-классы.Они довольно хорошо поддерживаются IE8 и выше.Вы можете проверить совместимость любого псевдокласса, который вы собираетесь использовать здесь http://caniuse.com/#search=after

Если вы не хотите точку, просто используйте пустые запятые в содержимом, а затем display:block, а также укажите высоту и ширину.

menu li:before {
    content: "";

    display:block;
    width:50px;
    height:50px;
    background:red;

}
-2