首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何避免CSS :invalid和:valid伪选择器的IE11“慢”计算

要避免CSS :invalid和:valid伪选择器在IE11中的“慢”计算,可以采取以下方法:

  1. 使用JavaScript进行表单验证:在IE11中,:invalid和:valid伪选择器的计算速度较慢,可以通过使用JavaScript来替代这些伪选择器进行表单验证。通过在表单提交前使用JavaScript代码对表单字段进行验证,可以避免使用这些伪选择器带来的性能问题。
  2. 使用其他CSS选择器代替:如果需要根据表单字段的有效性来应用样式,可以考虑使用其他CSS选择器来代替:invalid和:valid伪选择器。例如,可以使用类选择器或属性选择器来根据表单字段的状态应用样式。
  3. 减少表单字段数量:如果可能的话,可以尝试减少表单中的字段数量。较少的表单字段数量可以减少IE11计算伪选择器的负担,从而提高性能。
  4. 使用其他浏览器:如果对于IE11的兼容性要求不高,可以考虑推荐用户使用其他现代浏览器,如Chrome、Firefox或Edge。这些浏览器对于:invalid和:valid伪选择器的计算速度更快,可以提供更好的用户体验。

需要注意的是,以上方法仅针对IE11中的性能问题,对于其他浏览器仍然可以使用:invalid和:valid伪选择器来进行表单验证和样式应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS选择器世界》读书笔记

概述 CSS选择器可分为4类:选择器(如body{})、选择符(如相邻兄弟关系选择符+)、类(如:hover)元素(如::before)。...CSS选择器优先级 等级 选择器 例子 0级 通配选择器、选择符逻辑组合类 通配选择器*、选择符(+、~、空格、>)、类如:not等 1级 标签选择器 body {} 2级 类选择器、属性选择器类...:any-link不兼容IE11,其他浏览器兼容性良好,匹配规则如下: 匹配所有设置了href属性链接元素,包括,; 匹配所有匹配:link类或者:visited元素...该类也可以用于单选框,当单选框组没有一个选中时候则单选框每一项都匹配。 :valid:输入验证有效时候匹配。:invalid:输入严重无效时候匹配。...由于首次进来时候往往没有输入内容,这时如果有required属性,此时:invalid会匹配,这样就有点不太友好了,更好元素就是:user-invalid,可以避免首次判断,但是目前兼容性非常不好

8310

『极限版』不掺水,用纯 CSS 来实现超飒表单验证功能

[required]:invalid:not(:placeholder-shown) + span { display: inline; } 我们重点介绍以下几个 CSS 选择器: :invalid...与 :valid 判断有效性选择器(:valid:invalid)匹配有效或无效,或元素。...:valid选择器表示值通过验证,这告诉用户他们输入是有效。 :invalid选择器表示值不通过通过验证,这告诉用户他们输入是无效。...实现逻辑 有了上面的几个 属性以及 css 选择器类说明,那么这个纯CSS实现表单验证功能就变得简单多了。...参考资料 whatwg 4.10.5 The input element 纯CSS实现表单验证 『真香警告』这33个超级好用CSS选择器,你可能见都没见过。 CSS 选择器

73930
  • 如何使用CSS选择器

    所谓必填,就是在提交所属表单之前,用户必须为输入框指定一个值 :valid:匹配一个内容验证正确输入框 :invalid:匹配一个内容未通过验证输入框 :playing:指向一个正在播放audio...或video元素 浏览器最近又收到了三个选择器… :is选择器 注意:这最初被指定为:matches():any(),但:is()已经成为CSS标准。...important来解决这个问题,但「请避免这样做!」它使进一步样式定义开发变得更具挑战性。 /* works but avoid this option!...重置样式,无论其优先级如何;不需要进一步选择器或!...它在Safari 15.4+[11]Chrome 105+[12]可用,但是到2023年应该可以广泛使用。 总结 :is() :where() 选择器简化了 CSS 语法。

    2.2K40

    CSS Selectors Level 4新特性全面解析

    CSS3 CSS4 永远都不会出现,它们只是为了区分 CSS 模块升级后等级,例如有些 CSS 选择器在之前就存在了,但是此时我们为它添加了新特性,那么这个模块就升级到了 CSS Selectors...:-webkit-any-link :-moz-any-link 是它兼容性写法。目前工作组对该选择器命名尚不满意,未来该选择器可能会修改其名字。...active 会匹配可被放置目标元素,valid 匹配放置元素为合法元素目标元素,invalid 反之。如果:drop() 括号里没有任何过滤,那么将 :drop 没有区别。...来消除这种差异,也可以利用各种 CSS hack 来解决不同浏览器兼容性,但是不可避免地会对性能造成影响。...无论如何,相信在各大厂商 W3C 工作组推动下,未来不管在 CSS 还是 JavaScript 上,将会逐渐走向规范上统一,让我们拭目以待吧!

    2K70

    HTML 表单和约束验证完整指南

    在本文中,我们将研究 HTML 表单字段 HTML5 提供验证选项。我们还将研究如何通过使用 CSS JavaScript 来增强这些功能。 什么是约束验证? 每个表单域都有一个目的。...任何知道如何打开浏览器开发工具的人也可以绕过您精心制作 HTML JavaScript。...(但请避免使用它,因为它很少有用) search 搜索输入字段 submit 一个表单提交按钮 tel 电话号码输入字段 text 文本输入字段 time 没有时区时间选择器 url URL 输入字段...开发人员选择创建基于 JavaScript 输入有三个主要原因。 1. 标准控件难以设计风格 CSS 样式是有限,通常需要技巧,例如用标签::before::after元素覆盖输入。...CSS 验证样式 您可以将以下类应用于输入字段以根据当前状态对其进行样式设置: 选择器 描述 :focus 重点领域 :focus-within 一个元素包含一个具有焦点字段(是的,它是一个父选择器

    8.3K40

    这些 CSS 类,你可能还不知道,可以用起来了!

    作者:Chidume Nnamdi 译者:前端小智 来源:mediuum css 类是用于向某些选择器添加特殊效果,是动态,指当前元素所处状态或者特性。...只有一个元素达到一个特定状态时,它可能得到一个样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单CSS更少 JS。...:valid | 选择一个有效元素 :valid CSS 类表示内容验证正确 或其他 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据正确性样式。...:invalid | 选择一个无效元素 :invalid CSS 类 表示任意内容未通过验证 或其他 元素。...CSS 类 :not() 用来匹配不符合一组选择器元素。

    1K20

    CSS】776- 16个非常有用CSS选择器

    选择器可以为文档中不一定具体存在结构指定样式,或者为某些元素、文档标记模式、甚至是文档本身状态所指示幻像类指定样式。...— CSS 权威指南:Eric Meyer、Estelle Weyl 这篇文章鼓励构造 UI 时使用更多纯 CSS 更少 JS。...熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践尽可能减少代码。 1、::first-line | 选择首行文本 这个元素选择器选择换行之前文本首行。...这个选择器应用于根元素,多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个选择器将选中没有任何子项元素。该元素必须为空。...input:valid { boder-color: lightsalmon; } 14、:invalid | 选择一个未通过验证元素 像 :valid 一样,但是会应用到未通过验证元素

    75830

    CSS selectors level 4

    在 Codepen 上试试 语言类? 这类选择器包括那些使用语言相关设置选择器。 :dir(ltr) 浏览器支持 它选择那些具有从左到右方向性元素,其中文档语言指定如何确定方向性。...这会给这个组标签添加一个颜色为红色样式。 在 Codepen 上试试 :valid :invalid 浏览器支持 它选择那些根据有效性语义或值有效或无效元素。...如果没有定义值有效性规则,则这个元素既不满足:valid也不满足:invalid。...在 Codepen 上试试 在某些情况下,某些选择器会具有与:valid:invalid相同效果。...scope(不要将它作用域样式混淆) 时间类(你可以在这里了解更多信息) :blank user-invalid 但绝对要注意这些以及第4级选择器其余部分。

    67220

    我可能学到了“假”CSS元素

    CSS选择器除了根据id、class、属性等从DOM中获取元素以外,还有很重要一类,用来获取元素特别内容或特别状态,这就是 元素(Pseudo-elements) 类(Pseudo-classes...) [I] 元素 元素是对元素中特定内容进行操作,选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通选择器无法完成工作。...not() 一样,:nth-child() :nth-last-child() 也是函数式选择器;接受一个单一参数,可取值为: odd -- 奇数 even -- 偶数 一个整数 -- 第n个...:in-range :out-of-range 作用于 type = range|number|date input :valid :invalid 依赖于 input type类型... pattern约束,判断是否校验通过 可以组合使用,如 input:focus:invalid [2.6] jQuery选择器中支持部分“类” :checked :focus :disabled

    1.5K10

    css3学习总结

    一,结构选择器 2.属性选择器 3.CSS3选择器 UI选择器: :enabled选择启用状态元素 :disabled 选择禁用状态元素 :checked选择被选中input元素(单选按钮或复选框...) :default 选择默认元素 :validinvalid 根据输入验证选择有效或无效input元素 :in-range、out-of-range选择指定范围之内或者之外受限元素 :required...、optional根据是否允许:required属性选择input元素 动态选择器: :link选择链接元素 :visited 选择用户以访问元素 :hover 鼠标悬停其上元素 :active...鼠标点击时触发事件 :focus 当前获取焦点元素 其他选择器: :not()对括号内选择器选择取反 :lang() 基于lang全局属性元素 :targeturl...片段标识符指向元素  :empty选择内容为空元素 :selection鼠标光标选择元素内容 4,CSS文本属性复习 white-space:对象内空格处理方式 nowrap 控制文本不换行

    82730

    CSS快速入门(一)

    目录 CSS快速入门 简介 语法结构 如何注释 引入方式 选择器 简介 选择器列表 选择器优先级 基本选择器 标签选择器选择器 id选择器 通用选择器(不重要) 组合选择器 后代选择器 儿子选择器...相邻选择器 弟弟选择器 属性选择器 语法 示例 分组与嵌套 选择器 语法 示例 标准类索引 选择器参考表 网站分享 CSS快速入门 简介 层叠样式表 — 也就是CSS — 是你在HTML之后应该学习第二门技术...HTML用于定义内容结构语义,CSS用于设计风格布局。...它是元素其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中CSS属性值方式。选择器所选择元素,叫做“选择器对象”; css是用来调节标签样式 那为什么需要学选择器呢?...(en-US) :valid :visited :where() 选择器参考表 选择器 示例 学习CSS教程 类型选择器 h1 { } 类型选择器 通配选择器 * { } 通配选择器选择器 .box

    93420

    揭秘 Google IO Web 新动态,看这一篇就够了!

    嵌套是开发者们经常向 CSS 工作组请求功能,因为它能避免选择器重复,使 CSS 更容易阅读,你可以将相关样式规则组合在一起。...:user-valid、:user-invalid 长期以来,我们一直有类 :valid :invalid。它们在浏览器中广泛可用,用于指示表单元素是否根据任何约束规则有效或无效。...:user-valid :user-invalid 行为与 :valid :invalid 基本相同,但它们只有在用户与字段交互后才会起作用。...关于 :user-valid :user-invalid 想要了解更多请移步: :user-valid MDN[18] :user-invalid MDN[19] 这些新类在 2023 年 10...MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid [19] :user-invalid MDN: https://developer.mozilla.org

    8210

    CSS3选择器介绍及用法总结

    ::first-letter::first-line好像很少用 CSS2中,他俩只能应用在段落之类块级元素,超链接等行内元素就不能用了 CSS2.1中,:first-letter可以应用所有元素...类与元素## 元素选择器写成类单冒号形式没什么问题 但是选择器使用双冒号就不能选择元素了 这里说一下元素区别 类我理解是元素达到一种状态 状态存在,改变样式;状态消失...,样式消失 元素应该说是操作元素特定内容 实在分不清都写成单冒号形式就好了 #CSS3选择器# 敲这么多终于到关键地方了 CSS3增加了很多强大选择器,以伪劣选择器为主 CSS1CSS2...选择设置了required属性元素 :valid 合法元素选择器 :valid 选择输入值合法元素 :invalid 非法元素选择器 :invalid 选择输入值非法元素 ##属性选择器##...我们做一个小练习,仅仅用CSS3选择器做一个点击按钮切换图片小图表 通过点击单选框显示不同图片 像这样 首先我们需要编写html代码 使用三个radio三个img元素 <input

    1.5K20

    【前端开发系列】—— CSS3属性选择器总结

    因此,痛下决心来学习CSS,最近一周也会更新下相关学习笔记。   CSS3中使用了很多属性选择器,通过这些属性选择器,可以根据我们自己设计来定义元素样式,制作精美的网页。...CSS3属性选择器 下面是CSS3属性选择器语法,及使用。...元素选择器   通常,CSS中会有一些已经定义好元素选择器,我们通过 选择器:元素{属性名:值}   来定义。   ...常用选择器有: 1 first-line 元素选择器:某个元素第一行 2 first-letter:某元素首字母 3 after:某元素之后插入内容,如 :before{   content...:不符合元素范围 valid:符合元素范围校验 1 2 3 4 input[type="

    72570

    CSS(CSS3)选择器(2)

    该部分主要为CSS3新增选择器 接上一篇 CSSCSS3)选择器(1) 一.通用兄弟选择器:                         24:E ~ F,匹配任何E元素之后同级F元素。...*/ 三.结构性选择器:                         28:E:root,匹配文档根元素,对于HTML文档,就是HTML元素。...input[type="text"]:invalid{ background-color: red; }                         50:E:valid,用来指定元素内容可以通过...input::placeholder{ color:red; } 至此,CSSCSS3)选择器简单说明笔记就到这里结束了,其实这些内容包含了CSSCSS3)世界绝大多数常用选择器,当然,...参考:css选择器笔记,30个你必须熟记css选择器,MDN-docs-选择器介绍,HTML5CSS3权威指南(第3版下册-庐陵牛)第十九章,beforeafter元素用法。

    97760
    领券