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

使用 :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中文网其他相关文章！