CSS 多个伪类和伪元素

Question

这种 CSS 语法是否存在并且可以安全地用于所有现代浏览器。

footer ul.footer-menu li:not(:first-child):after

Answer 1

是的，它有效，请参阅下面的代码片段。

footer ul.footer-menu li:not(:first-child):after {
    content: 'added some text';
    color: red;
}

<footer>
    <ul class="footer-menu">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut tempora voluptatum praesentium rem culpa, cupiditate quas animi commodi voluptates? Cupiditate error cum suscipit dolorum deleniti? Non dolore, cumque assumenda voluptatum.</li>
    </ul>
</footer>

是的，它可以在所有现代浏览器上安全使用。根据 caniuse.com，generated content by pseudo-elements (:after), for CSS 2.1 selectors (:first-child) and CSS 3 selectors (:not) 的全球支持率接近 98%。

Answer 2

是的。

:not 97.72% 全球浏览器支持

:first-child 97.74% 全球浏览器支持

:after 97.72% 全球浏览器支持

You can always find out if you can use ... here

REF: https://caniuse.com/

CSS 多个伪类和伪元素

CSS multiple pseudo classes and pseudo elements

css

pseudo-class

pseudo-element

You can always find out if you can use ... here

REF: https://caniuse.com/

CSS 多个伪 类 和伪元素

CSS multiple pseudo classes and pseudo elements

css

pseudo-class

pseudo-element

You can always find out if you can use ... here

REF: https://caniuse.com/

CSS 多个伪类和伪元素