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

为什么:只读选择器会影响没有readonly属性的元素?

只读选择器会影响没有readonly属性的元素是因为只读选择器具有优先级较高的样式规则,会覆盖其他样式规则对元素的设置。

只读选择器是一种CSS选择器,用于选择具有readonly属性的表单元素,例如input、textarea等。当给一个元素添加了只读选择器的样式规则后,该元素将变为只读状态,用户无法编辑或修改其内容。

然而,只读选择器的样式规则具有较高的优先级,会覆盖其他样式规则对元素的设置。即使其他样式规则中没有设置readonly属性,只要该元素被选择到并应用了只读选择器的样式规则,它仍然会被视为只读元素。

这种影响可能会导致一些意外的结果,特别是在使用通用选择器(*)或其他选择器来设置元素样式时。如果在通用选择器的样式规则中设置了只读选择器,那么所有元素都可能被视为只读元素,即使它们没有设置readonly属性。

为了避免只读选择器对没有readonly属性的元素产生影响,可以通过以下方法之一解决:

  1. 避免在通用选择器或其他选择器中设置只读选择器的样式规则,以确保只有具有readonly属性的元素才会被视为只读元素。
  2. 显式地为没有readonly属性的元素设置样式规则,以覆盖可能被只读选择器影响的样式。

总结起来,只读选择器会影响没有readonly属性的元素是因为只读选择器具有较高的优先级,会覆盖其他样式规则对元素的设置。为了避免这种影响,需要注意样式规则的优先级和具体设置。

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

相关·内容

前端html和css总结

1.2 表单常用属性 属性 表示 name 对提交到服务器后表单数据进行标识 checked 在页面加载时被预先选定input元素 selected 规定在页面加载时预先选定该选项 readonly...只读元素 disabled 禁用元素 size 下拉列表中可见选项数目 1.3 选择器优先级 行内选择器 > id选择器 > 父代选择器 > class选择器 > 标签选择器 > *{...}通配符选择器 1.4 有关间距css属性 margin/padding: 一个值:上下左右 两个值:上下,左右 三个值:上,左右,下 四个值:上,右,下,左 1.5 有关边框css属性...,下一个元素自动顶上去。...2、父元素元素浮动,导致父元素塌陷 height=0 默认div高度是根据内容来自动撑开 解决方案: 1:在父元素设置高度 弊端:不够灵活。

1.1K20

CSS3选择器大全

大家好,又见面了,我是你们朋友全栈君。 1.CSS3选择器 属性选择器 在HTML中,通过各种各样属性可以给元素增加很多附加信息。例如,通过id属性可以将不同div元素进行区分。...,而CSS3在CSS2基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符概念,这三个属性选择器与CSS2属性选择器共同构成了CSS功能强大属性选择器。...用来选择没有任何内容元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。 比如说,你文档中有三个段落p元素,你想把没有任何内容P元素隐藏起来。我们就可以使用:empty选择器来控制。...13.CSS3选择器 :read-only和read-write选择器 :read-only伪类选择器用来指定处于只读状态元素样式。...简单点理解就是,元素中设置了“readonly=’readonly’” :read-write选择器刚好与:read-only选择器相反,主要用来指定当元素处于非只读状态时样式。

72210
  • 表单常用控件有哪些_html表单控件样式修改

    表单特性   value属性规定输入字段初始值;   readonly属性规定输入字段为只读(不能修改); readonly属性不需要值,它等同于readonly=“readonly”。   ...disbled属性 规定输入字段是禁用,被禁用元素是不可以用和不可以点击,被禁用元素不会被提交。...没有属性值   size属性规定输入字段尺寸(以字符计);   maxlength属性规定输入字段允许最大长度;该属性不会提供任何反馈。...重置按钮清除表单中所有数据 submit 定义提交按钮。提交按钮会把表单数据发送到服务器 text 定义单行输入字段,用户可在其中输入文本,默认宽度为20个字符。...网页url search搜索引擎 ——chrome下输入文字后,多出一个关闭x range 特定范围内数值选择器 min,max,step(步数) 例如:用js显示当前数值

    3.9K20

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

    因此,痛下决心来学习CSS,最近一周也更新下相关学习笔记。   CSS3中使用了很多属性选择器,通过这些属性选择器,可以根据我们自己设计来定义元素样式,制作精美的网页。...CSS3属性选择器 下面是CSS3属性选择器语法,及使用。...元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值; 属性:值; }   在元素类型匹配时,就可以使用类似正则匹配方法。...伪元素选择器   通常,CSS中会有一些已经定义好元素选择器,我们通过 选择器:伪元素{属性名:值}   来定义。   ...,指定样式 元素状态选择器 hover:当鼠标浮在元素上方时,触发 active:当鼠标按下,还没有离开时,触发。

    72970

    新增querySelector、querySelectorAll测试

    从IE9开始DOM开始支持支持CSS选择器了,DOM提供了两个接口 querySelector 得到一个DOM querySelectorAll 得到一组DOM 一个个解释这些选择器没有必要,我们结合前面的数组知识...页面上有一组元素,然后会依据我们数组中预订选择值选择相应元素,并将背景变红色,同时提示选择器含义。这样代码便于运行理解和扩展。...指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于", "html部分", "元素内容为空白", "锚", "子元素"..."从第3个算起, 每隔2个(包含第2个)", "只有一个子元素", "可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态...,一个存放选择器说明。

    38910

    TypeScript 官方手册翻译计划【五】:对象类型

    只读属性 在 TypeScript 中,我们可以将属性标记为 readonly,表示这是一个只读属性。虽然这不会改变运行时任何行为,但标记为 readonly 属性在类型检查期间无法再被重写。...TypeScript 在检查两个类型是否兼容时候,并不会考虑它们属性是否是只读,所以只读属性也可以通过别名进行修改。...可选元组元素只能出现在最后面,并且影响该类型长度。 type Either2dOr3d = [number, number, number?]...使用展开运算符元组没有明确长度 —— 可以明确只是它不同位置有对应类型元素。...'. */ 这里,distanceFromOrigin 没有修改元组元素,但它期望接受一个可变元组。

    1.8K30

    不可能这么可爱

    作者:陈大鱼头 github:KRISACHAN 标签是我们日常开发中非常常见替换元素了,但是最近在刷 whattwg 跟 MDN 时候发现 跟 有很多相关属性...没想到,这些选择器居然跟 input … 到写文章为止,根据最新 drafts 指出,一共有3大类,16种跟 input 相关选择。其实都挺有用,善用它们,让我们用户体验更加美好。...="radio" /> 第三类:侦查系(Input Value-checking) 选择处于空值时 ,暂未被浏览器支持 可怕,除了选择器,居然还跟这些属性有关系 除了有很多相关选择器...他们作用如下: 属性 作用 maxlength 可输入最大长度 minlength 可输入最小长度 size 输入框长度 readonly 输入框是否只读 required 输入框是否必填 multiple...总结 其实 标签还有很多有趣功能是可以挖掘,不同类型,结合不同选择器属性,是可以有更多让人为之惊叹体验

    48410

    CSS3选择器介绍及用法总结

    ele+ele 相邻兄弟元素选择器 div+p 选择紧挨着div元素之后一个p元素 [attr] 属性选择器 [target] 选择带有target属性元素 [attr=val] 属性选择器 [target...: ""; display: block; clear: both; } 至于为什么就不是今天讨论范畴了( ̄_, ̄ ) ##伪类与伪元素## 伪元素选择器写成伪类单冒号形式没什么问题...读写元素选择器 :read-write 选择可读并且可写元素 :read-only 只读元素选择器 :read-only 选择设置了readonly属性只读元素 :optional 伪类选择器 :...class中以空格分隔属性值中没有“de”属性值 说到这个属性选择器,我还要多说一点 我在表格中示例是这么写 a[src=\.pdf] 是因为“.”它不认识,我们需要加“\”转义 不过css中属性选择器也可以写成引号形式...##空元素选择器## :empty就是选择真正元素,内部没有任何子元素,文本节点也不能有 举个例子 1 2 3 p:empty::before

    1.5K20

    jQuery选择器(满足你所有业务)

    jQuery 选择器允许对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素 id、类、类型、属性属性值等"查找"(或选择)HTML 元素。...下一个同辈元素集合 $("#demo~p") //选取id为demo元素后所有同辈元素集合 属性选择器(返回元素集合) $("[href]") //选取所有带有 href 属性元素...[class~=text]") //选取拥有class属性以空格分割值中含有textinput元素 [attribute1][attribute2][attributeN] //合并多个属性过滤选择器...:visible //选取所有可见元素,返回元素集合 表单对象属性过滤选择器(返回元素集合) :enabled //选取所有可用元素 :disabled //选取所有不可用元素 :checked...select option:selected") //选取所有被选中选项元素 :read-only //用于匹配设置 "readonly"(只读属性元素 表单选择器(返回元素集合) $("

    90020

    《CSS选择器世界》读书笔记

    CSS只有一个全局作用域,但是Shadow DOM中样式不会影响外面的样式。...输入伪类 :enabled元素可用,:disabled元素不可用,他们是对立readonly表单是:enabled,另外:enabled可以用在a标签上,a标签没有:disabled状态,哪怕给...这里需要注意时候如果option标签没有给默认值时候:default并不会匹配,但是浏览器默认选中第一个元素。 :checked:checkbox选中时伪类。...就是我们在标签中设置required或者pattern等属性时候,判断是否有效,匹配对应伪类。...由于首次进来时候往往没有输入内容,这时如果有required属性,此时:invalid匹配,这样就有点不太友好了,更好元素就是:user-invalid,可以避免首次判断,但是目前兼容性非常不好

    8710

    看不完那种!前端170面试题+答案学习整理(良心制作)

    42.jQuery中有哪几种常见选择器 基本选择器;层次选择器;过滤选择器属性选择器;子元素选择器;表单选择器;内容选择器;可见选择器 43.使用jQuery将页面上所有元素边框设置为2px宽虚线...最常见例子就是清除 float overflow: hidden; 属性。overflow: hidden;触发元素 BFC,因此其内部 float 元素不会影响到外部元素布局。...相同点:都会使文本框变成只读,不可编辑 ? image disabled属性在将input文本框变成只读不可编辑同时,还会使文本框变灰,但是readonly不会。...设置了readonly属性input元素依然可以获取焦点,但是设置了disabled属性input元素没有办法获取焦点 readonly只针对input和textarea有效,而disabled对于所有的表单元素都有效...重绘和重排关系:在回流时候,浏览器会使渲染树中受到影响部分失效,并重新构造这部分渲染树,完成回流后,浏览器重新绘制受影响部分到屏幕中,该过程称为重绘。

    11.5K50

    寒假提升 | Day7 CSS 第五部分

    ,那么这个块级元素margin-top值传递给父元素 margin-bottom传递:当块级元素底部线和父元素底部线重叠,那么这个块级元素margin-bottom值传递给父元素 折叠:...事实上现在很多网站对于列表元素没有很强烈偏好,更加不拘一格,按照自己风格来布局: 原因是列表元素默认CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多限制, ul/ol中只能存放...) radio:单选框 checkbox:复选框 button:按钮 reset:重置 submit:提交表单数据给服务器 file:文件上传 readonly:只读 disabled:禁用 checked...) 常见布尔属性有disabled、checked、readonly、multiple、autofocus、selected 布尔属性可以没有属性值,写上属性名就代表使用这个属性 如果要给布尔属性设值...、通用选择器属性选择器、类选择器、id选择器、伪类(除否定伪类) :not(x)表示 除x以外元素

    1K10

    Quill 富文本编辑器简介

    你可以传入 CSS 选择器或者 DOM 元素: CSS 选择器 var editor = new Quill('.editor'); // CSS选择器 DOM 元素 var container =...: boolean; } 下面我们介绍一下几个主要选项: bounds Default:document.body DOM 元素或者一个 DOM 元素所对应 CSS 选择器,其中编辑器 UI 元素...debug Default:warn debug 开关。注意:debug 是一个静态方法并且影响同一个页面的其它编辑器实例。警告和错误信息是默认启用。...placeholder Default:None 编辑器内容为空时显示占位符。 readOnly Default:false 是否以只读模式实例化编辑器。...scrollingContainer Default:null DOM 元素或者一个 DOM 元素所对应 CSS 选择器,用于指定哪个容器拥有滚动条(例如:overflow-y: auto)当 Quill

    3.7K20

    使用CSS选择器进行元素定位

    在selenium webdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位时候,使用css 和 xpath才是经常需要用到。...之前有专门讲过使用xpath对元素定位使用,下面要介绍css选择器来进行元素定位。...选择每一个src属性值以"https"开头元素 3 [attribute$=value] a[src$=".pdf"] 选择每一个src属性值以".pdf"结尾元素 3 [attribute*=...3 :root :root 选择文档元素 3 :empty p:empty 选择每个没有任何子级p元素(包括文本节点) 3 :target #news:target 选择当前活动#news元素(...:read-write 用于匹配可读及可写元素 3 :read-only :read-only 用于匹配设置 "readonly"(只读属性元素 3 :optional :optional 用于匹配可选输入元素

    3.1K50

    项目中遇到bug(web前端-持续更新)

    input放在a标签里面单击不能获取input光标(IE环境下) 双击才可以获得焦点,目前有的解决方案: 不要给a标签添加href属性; 不要在外面套上a标签。...隐藏input标签光标 项目需求:input值json加载,只读+光标隐藏,通用解决方案有其他标签模拟,但是不能改input 所以解决方案为给input加下面这两个属性: //只读 readonly...="readonly" //隐藏光标 unselectable="on" 返回私有数组 返回数组一个副本,这样改动就不会影响原数组,只是副本而已 var array = (function...getDays: function () { return days.slice(); } } })() jquery选择器扩展...//jQuery contains 选择器,对Contains查找内容不区分大小写 jQuery.expr[':'].Contains = function (a, i, m) { return

    98420

    属性关键字OnDelete,Private,ReadOnly,Required

    第107章 属性关键字 - ReadOnly指定属性只读,这限制了其值设置方式。...用法要指定属性只读,请使用以下语法:Property name As classname [ ReadOnly ];否则,省略此关键字或将单词Not放在关键字前面。...当插入或更新记录时, IRIS属性Required关键字。默认如果省略此关键字,则属性不是只读。...第108章 属性关键字 - Required对于持久性类,指定属性值必须先给定一个值,然后才能存储到磁盘。对于启用了XML类,指定属性映射到元素是必需。...如果属性被标记为REQUIRED,则模式中相应元素没有minOccurs=“0”,因此被认为是必需。在子类中,可以将可选属性标记为必需,但不能反之亦然。

    73330

    深入解析 CSS 选择器

    属性选择器 通过已经存在属性名或属性值匹配元素 div { margin-top: 20px;} /* 带有属性 title 元素 */ [title]{...; } /* 属性选择器默认区分大小写,在属性选择器右方括号前添加一个用空格隔开字母 i(或 I),可忽略大小写 */ [attr*=test5 i]{ background: #865858...*/ strong:only-of-type { background: #8e7f7f; } /* 没有元素元素 */ p:empty { height: 16px; background...important 是 CSS 选择器一个"流氓"属性,不论选择器权重或者优先级高低,只要加上 !important,那么这个样式优先级就是最高 如果针对同一元素样式存在冲突且同时存在 !...不过到目前为止,暂时没有能够通过元素选择其父元素或其父元素相关元素选择器,这就让人很是头疼。

    72050

    Web前端开发HTML笔记

    ,单位px、em、cm、mm border属性:指定图标的边框宽度,单位px、em、cm、mm alt属性:(1)作用一:当网页上图片被加载完成后,鼠标移动到上面去,显示这个图片指定属性文字...(2)作用二:如果图像没有下载或者加载失败,会用文字来代替图像显示 (3)作用三: 搜索引擎可以通过这个属性文字来抓取图片 音频与视频: 下面的两对,embed是音频文件,video...,也是HTML中最基础元素....该属性只能是checked disabled 设置首次加载时禁用当前元素,该属性只能是disabled maxlength 限制输入框最大允许输入字符长度,maxlength=10 readonly...cols 指定文本域宽度 rows 指定文本域高度 disabled 指定禁用文本域 readonly 指定文本域只读 List 列表: 列表方法,可以将一个普通文本框

    2.3K20

    Selenium 系列篇(四):JS 篇

    为什么需要 JS 前面 3 篇文章讲了 Selenium 一些基本操作,利用这部分技能,大部分网站自动化都能顺利完成。...('tag_name'); # 4、通过类名,获取元素列表 document.getElementsByClassName("class_name"); # 5、通过选择器,获取一个元素 document.querySelector...("css selector") # 6、通过CSS选择器,获取元素列表 document.querySelectorAll("css selector") 拿到元素之后,就可以操作元素属性了,比如...首先,利用常规模式编写一波自动化,利用 WebDriver 找到元素,然后直接给元素设置一个日期值。 运行后会直接报错,运行日志提示目标元素存在一个不可以编辑属性 - readonly ?...这时候通过 JS 方法可以很方便地去掉这个属性,然后再加上对元素属性操作,就能正常设置日期。

    1.4K20
    领券