微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css3中last_child兼容

CSS3中的:last-child伪类用于选取某个元素的最后一个子元素。但是,由于IE8及以下版本不支持这个伪类,因此需要进行兼容处理。

css3中last_child兼容

一种可行的兼容方案是使用JavaScript,通过获取元素的最后一个子节点来为其添加类名,从而实现样式的控制。例如:


if (!("lastElementChild" in document.documentElement)) {
  Object.defineProperty(Element.prototype,"lastElementChild",{
    get: function() {
      return this.children[this.children.length - 1];
    }
  });
}

以上代码通过检测浏览器是否支持lastElementChild属性来进行兼容处理。如果不支持,则通过Object.defineproperty()方法Element原型添加lastElementChild属性,使其返回该元素的最后一个子节点。

另一种方案是使用CSS2选择器:first-child + :last-child,该选择器可以同时匹配一个元素的第一个和最后一个子元素。例如:


li:first-child + li:last-child {
  background-color: #999;
}

以上代码选择了所有<li>元素中第一个和最后一个元素之间的所有元素,并将其背景色设为灰色。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。