0

0

css 浏览器兼容性选择器有哪些_老版本适配建议

P粉602998670

P粉602998670

发布时间:2026-01-12 01:15:23

|

127人浏览过

|

来源于php中文网

原创

IE8及以下不支持:nth-child()、:not()、:last-child、:first-of-type、[type="submit"]、h1+p、h1~ul;IE6仅支持基础选择器和a:hover;IE7开始支持:first-child和部分属性选择器;IE8支持:focus(表单元素)、:checked(有限)、E+F,但不支持E~F、:nth-系列、:not()。

css 浏览器兼容性选择器有哪些_老版本适配建议

哪些 CSS 选择器在 IE8 及更老浏览器里根本不能用?

直接说结论::nth-child():not():last-child:first-of-type[type="submit"]属性选择器)、h1 + p(相邻兄弟)、h1 ~ ul(通用兄弟)——这些在 IE8 及以下**全部不支持**。IE6 连 :hover 都只认 a 标签,.nav:hover 这种写法在 IE6 下完全无效。

  • IE6:只支持基础选择器(#id.classdivdiv p),伪类仅限 a:hover,不支持任何属性选择器
  • IE7:开始支持 :first-child 和部分属性选择器(如 [href]),但大小写敏感([class="btn"] 不匹配 class="Btn"
  • IE8:支持 :focus(仅表单元素)、:checked(有限)、E+F,但依然不支持 E~F:nth- 系列、:not()

老项目要兼容 IE8,必须守住的「安全选择器清单」

不是“能用就行”,而是“用了就一定稳”。只要严格限定在这范围内,就能绕过绝大多数兼容性报错或样式失效:

  • ID 选择器:#header#main-nav
  • 类选择器:.btn.is-active(注意:IE6 不支持双类连写 .btn.primary,得拆成两个规则)
  • 标签 + 后代组合:ul li aform input[type="text"] —— 注意!input[type="text"] 在 IE8 是支持的,但 IE7 及以下不支持,所以如果目标含 IE7,就得改成 input.text 并手动加 class
  • 群组选择器:h1, h2, h3 { margin: 0; } 所有版本都 OK
  • 伪元素 :before / :after:IE8 支持,但必须用单冒号语法 :before(不是 ::before),且 content 值不能是空字符串或纯空格

遇到不兼容选择器时,怎么低成本替换?

别急着写 JS 动态加 class,先看能不能用已有结构“借力”:

  • 想用 li:nth-child(2n) → 改用 li.even后端或模板层输出 class,或用 jQuery 补充:
    $('li:even').addClass('even');
  • 想用 input:not([type="hidden"]) → 改成显式列举:input[type="text"], input[type="email"], input[type="password"]
  • 想用 section + aside → 改用 class:.section-main + .aside-related,并确保 HTML 中确实带这两个 class
  • 需要 :focus 视觉反馈但要兼容 IE7?用 JS 模拟:
    document.addEventListener('focusin', e => { if (e.target.tagName === 'INPUT') e.target.className += ' focused'; });
    ,再写 .focused { outline: 2px solid #007cba; }

千万别信“自动兼容工具”能解决选择器问题

像 Autoprefixer 这类工具只处理 CSS 属性前缀(-webkit-transition),**完全不碰选择器**。PostCSS 插件如 postcss-selector-notpostcss-pseudo-classes 虽能转译部分伪类,但会把 :not(.disabled) 编译成冗长的 class 列表,在复杂 DOM 下极易出错,且无法覆盖 :nth-child 这类逻辑型选择器。

玻璃钢企业网站源码1.5
玻璃钢企业网站源码1.5

本程序源码为asp与acc编写,并没有花哨的界面与繁琐的功能,维护简单方便,只要你有一些点点asp的基础,二次开发易如反掌。 1.功能包括产品,新闻,留言簿,招聘,下载,...是大部分中小型的企业建站的首选。本程序是免费开源,只为大家学习之用。如果用于商业,版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器,ie6+,Ch

下载

立即学习前端免费学习笔记(深入)”;

真正可靠的路径只有一条:明确锁定最低支持版本(比如 IE8),然后把选择器白名单钉死在项目规范里,CI 流程中用 stylelint 配合自定义 rule 拦截高危选择器(例如禁止出现 :nth-:not(~^=)。否则上线后用户一开 IE8,页面就只剩默认样式。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

150

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

393

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

494

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

178

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

118

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

172

2024.02.23

css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

509

2023.06.15

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

80

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.8万人学习

CSS教程
CSS教程

共754课时 | 18.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号