ie8 不支持伪类 :last-child 怎么办如何实现相同效果

最新推荐文章于 2021-08-03 19:24:11 发布

泰坦不认识尼克号

最新推荐文章于 2021-08-03 19:24:11 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：页面例子文章标签： html css ie 8

本文链接：https://blog.csdn.net/qq_36727980/article/details/78062966

页面例子专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在IE8浏览器中实现类似`:last-child`选择器效果的方法，通过设置`:first-child`的样式来达到兼容目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ie8很奇葩支持伪类 :first-child 但是不支持:last-child。但有些时候很想用last-child怎么办？

我发现一个可以解决这个问题的方法。（仅适用于同类有且仅有两个）

.main {
        width: 400px;
        height: 300px;
        border: 2px solid orange;
    }
    
    .main p:last-child {
        background: red;
    }

<div class="main">
        <p>我是第一个p标签</p>
        <p>我是第二个p标签</p>
    </div>

非ie8下显示效果（左） ie8下（右）

解决办法：

css里变成

 .main {
        width: 400px;
        height: 300px;
        border: 2px solid orange;
    }
    
    .main p {
        background: red;
    }
    
    .main p:first-child {
        background: #ffffff;
    }

实现效果非ie8下显示效果（左） ie8下（右）