CSS 多个伪类和伪元素答案

【问题标题】：CSS multiple pseudo classes and pseudo elementsCSS 多个伪类和伪元素
【发布时间】：2023-03-22 13:45:02
【问题描述】：

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

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

【问题讨论】：

标签： css pseudo-element pseudo-class

【解决方案1】：

是的，它有效，请参阅下面的 sn-p。

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)、CSS 2.1 selectors (:first-child) 和 CSS 3 selectors (:not) 的支持率接近 98%。

【讨论】：

【解决方案2】：

是的。

:not 97.72% 全球浏览器支持

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

:after 97.72% 全球浏览器支持

您可以随时了解是否可以在此处使用 ...

参考：https://caniuse.com/

【讨论】：