如何在 CSS 中设置最后一个列表项的样式，同时保持跨浏览器兼容性？

Barbara Streisand

发布： 2024-12-27 17:20:31

原创

917 人浏览过

How to Style the Last List Item in CSS While Maintaining Cross-Browser Compatibility?

使用 :last-child 将 CSS 应用到最后一个列表项

尝试仅设置最后一个列表项的样式 (

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}

登录后复制

但是，这种方法失败选择最后一个列表项。该问题源于浏览器对 :last-child 伪类的支持有限。

浏览器兼容性问题

尽管 :last-child 在现代浏览器中广泛使用，但它并不是普遍支持。 9 之前的 Internet Explorer 版本和 3.2 之前的 Safari 版本显然不支持它。

替代解决方案

要解决此兼容性问题，建议显式添加last-child 或类似的类到所需的列表项，并将样式应用于 li.last-child 。此方法确保了各种浏览器的兼容性：

ul#nav li.last-child {
    border-bottom: 1px solid #b5b5b5;
}

登录后复制

以上是如何在 CSS 中设置最后一个列表项的样式，同时保持跨浏览器兼容性？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章