input readonly属性;input中readonly和disable 收藏 0

那些容易被你忽略的HTML重要属性，你知道几个？

在前端开发编写html文件的时候，我们可能会很熟练的写出常见的html元素，但是如果问到某些元素的差别时，大家不一定能说的出来，今天就给大家总结一下那些很常见但容易混淆的属性。

html与css

css样式文件引入的方式有两种，分别是link标签和@import。

• link语法结构

link语法结构如下，注意rel=\’stylesheet\’属性要加上。

link语法结构

• @import语法结构

当@import用在html中时，需要配合style标签

@import在html中

当@import用在css文件中，直接使用@import url()即可

@import在css中

既然link与@import都可以用来引入css，那么它们的区别是什么呢？我们又该如何选择呢？

• link是XHTML标签的一种，除了可以加载css外，还可以定义其他rel属性，而@import只能用来加载css。

• link标签在加载css时，与页面一同加载，而@import需要等到网页完全加载以后才进行加载。

• link是XHTML标签，不存在兼容问题，而@import是在CSS2.1中提出的，对于低版本的浏览器不支持。

• link标签可以通过Javascript代码去控制其属性，而@import不可以。

javascript控制link

• @import支持在css文件中再次引入其他css文件，方便对多个css文件的管理。

因为@import引入的文件需要在网页完全加载后再加载，如果在网络速度较慢的情况下，会出现页面闪现，因此建议使用link标签代替@import。

html元素的readonly与disabled属性一般都是用于无法改变表单的内容，但是两者也是有区别的。

• readonly属性只针对input(text,password)和textarea元素，而disabled适用于所有表单元素，包括select,radio,checkbox,button等。

• 在表单元素使用了disabled后，该元素的的值不会随着form的action请求传递到服务器端，而使用readonly的元素值可以传递到服务器端。

以下是一些关于两者的使用建议。

• 在表单中为用户预填的唯一标识码，不允许用户改动，而且需要传递到后台的使用readonly属性。

• 用户提交完表单元素后，等待服务器端的验证，这个过程应该将元素设为disabled，button和submit也应该设为disabled，以防止重复提交。

• title属性

img标签的title属性是用来提供一些建议性的信息，在鼠标停留在上方时会显示，它对于图片来说只是一种注释性的信息，重要性偏低。

• alt属性

alt属性是为不能显示图像时，用来指定替换文字，需要注意的是替换文字是用来代替文字的，而不是用来注释文字的。

• 属性的使用

在做图片为主的网页时，考虑到网页的SEO，应当设置图片的alt属性为图片的真实内容，而给title设置一些建议性的内容。

今天这篇文章主要将了几个html中容易混淆的属性，你有收获吗？

精通 CSS 选择器（二）

补充了一些之前遗漏掉的选择器以及一些在 Selectors Level 4 中新定义的选择器。

[attribute=\”value\” i]，在 Selectors Level 4 中增强了属性选择器，添加一个 i 标识，让属性大小写不再敏感，例如：

支持的浏览器：Chrome/Opera, Firefox, Safari

:matches(selector…)，选择匹配任意选择器参数的元素，例如：

使用该伪类可以写成：

作用是简化代码。

支持的浏览器：Chrome/Opera(:-webkit-any), Firefox(:-moz-any), Safari

:any-link，选择所有链接：

支持的浏览器：Chrome/Opera(:-webkit-any-link), Firefox(:-moz-any-link)

:indeterminate，该伪类目前有以下3种情况：

1.选择一组单选框，其中没有任何一个单选框是 :checked 状态，例如：

设置一个红色轮廓线，

当改变一组单选框中任意一个单选框为 :checked 状态时，该伪类失效。

支持的浏览器：Chrome/Opera

2.选择 indeterminate DOM 属性为 true 的复选框，例如：

设置一个红色轮廓线，

用 JavaScript 改变元素的 indeterminate 属性值：

点击复选框改变其状态时，该伪类失效。

支持的浏览器：Chrome/Opera

3.选择不确定状态的 progress 元素，例如 ：

支持的浏览器：Chrome/Opera, Firefox, IE 10, Safari

:default，选择一组相似元素中默认的元素，例如：

可以选中默认状态为 :checked 的单选框和复选框，具有 selected 属性的 元素，表单默认的提交按钮，

支持的浏览器：Chrome/Opera, Firefox, Safari

:valid和:invalid，该伪类除了可以选择输入类元素也可以选择 form 元素，所以可以分为两种情况：

1.:valid 选择值通过校验的输入元素，:invalid 选择值未通过校验的输入元素，例如：

值通过校验的元素显示绿色边框，值未通过校验的元素显示红色边框：

支持的浏览器：Chrome/Opera, Firefox, IE 10, Safari

2.:valid 选择内部所有输入元素都通过校验的 form 元素，:invalid 选择内部至少有一个输入元素未通过校验的 form 元素

示例，当表单内部有输入元素未通过校验时隐藏提交按钮，所有元素都通过校验时则显示提交按钮：

样式：

支持的浏览器：Chrome/Opera, Firefox, Safari

:in-range和:out-of-range

:in-range 选择值在可选范围内的数值日期输入元素，:out-of-range 选择值在可选范围外的数值日期输入元素，例如：

值在范围内的元素显示绿色轮廓，值在范围外的元素显示红色轮廓：

如图：

:in-range 是 :valid 的一种特例，:out-of-range 是 :invalid 的一种特例。

支持的浏览器：Chrome/Opera, Firefox, Edge, Safari

:required和:optional

:required 选择所有设置了 required 属性的 input, textarea, select 等表单元素，:optional 选择所有没有 required 属性的 input, textarea, select 等表单元素，例如：

将必填的文本框显示为红色边框：

支持的浏览器：Chrome/Opera, Firefox, IE 10+, Safari

:read-only和:read-write

:read-only 选择状态为只读的元素，:read-write 选择状态可读写的元素，例如：

:read-only 伪类和 [readonly] 属性选择器是不一样的。

支持的浏览器：Chrome/Opera, Firefox(:-moz-read-only, :-moz-read-write), Edge, Safari

:nth-child(n of selector)，选择同级元素中第 n 个满足参数选择器的元素，其中 n 可以是自然数，也可以是公式或者关键词，和 Selectors Level 3 中定义的一样，例如：

选择同级中第 2 个具有 important 类的 li 元素，

如果这样写：

该选择器选择的是同级中第 2 个同时具有 important 类的 li 元素：

:nth-last-child(n of selector)，同上，只是倒着数。

支持的浏览器：Safari

:not(selector…)，在 Selectors Level 3 中否定伪类只能传入简单的选择器参数，在 Selectors Level 4 中增强了参数，可以给参数传入一个选择器列表，用于选择不匹配所有选择器参数列表的元素，参数之间用逗号分隔，例如，选择所有类不为 foo 同时也不为 bar 的 p 元素：

该选择器的效果等同于 。

支持的浏览器：Safari

:has(selector…)，选择满足参数给定条件的元素，例如：

选择内部含有 h1 元素的 header 元素，

该伪类具有很强大的功能，更多示例：

支持的浏览器：暂无

:focus-within，选择内部元素获得焦点的元素，例如：

样式：

当输入框获得焦点的时候，会应用上面的样式，同时，其父元素也会应用上面的样式。

支持的浏览器：暂无

:dir，选择特定书写方向的元素，例如：

从左向右书写的文字显示为红色，从右向左书写的文字显示为蓝色：

支持的浏览器：Firefox(:-moz-dir)

:fullscreen，选择处于全屏显示状态下的元素，例如：

全屏显示时段落文本大小为普通时的两倍。

支持的浏览器：Chrome/Opera(:-webkit-full-screen), Firefox(:-moz-full-screen), IE 11(:-ms-fullscreen), Safari(:-webkit-full-screen)

::placeholder，选择占位符伪元素，例如：

样式：

支持的浏览器：Chrome/Opera(::-webkit-input-placeholder), Firefox(::-moz-placeholder), IE10(:-ms-input-placeholder), Edge(::-ms-input-placeholder), Safari(::-webkit-input-placeholder)

:placeholder-shown，选择当前正在显示占位符的元素，例如：

如图：

支持的浏览器：Chrome/Opera, Safari

前端入门——css伪类和伪元素

伪类（pseudo-class）用于定义元素的特殊状态，伪元素（pseudo-element）用于设置元素指定部分的样式，语法如下：

伪类

伪元素

伪类以“:”单个冒号开头，伪元素以“::”两个冒号开头，注意区分它们的，比较容易混淆。

常用的伪元素有这些：

如下示例：

效果：

同理:after是在结尾插入字符，::after 和 ::before 常和content属性配合使用，用来出入特殊字符等。

伪元素可以是单冒号，可以是双冒号，较规范使用建议是双冒号。一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

其它的伪元素可以参考：

https://www.w3school.com.cn/css/css_pseudo_elements.asp

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

1. 锚伪类 —— 作用于链接a标签元素，常用来定义链接的不同状态。
2. 表单相关伪类——作用于表单元素，常用来定义表单不同的行为状态。
3. 扩展选择型伪类——按照逻辑规则选择元素，比如选择最后一个子元素，偶数或奇数序列的元素等。
4. 其它伪类

锚伪类主要用于a链接上，比如鼠标经过链接，点击链接后等状态，使用伪类可以定义不同状态下链接的样式，如下示例：

html：

css：

显示效果：

一般按照 :link、:visited、:hover、:active 的顺序(LVHA)使用，其中:hover 会被其它的伪类覆盖，为了确保:hover生效，:hover 需要放在 :link 和 :visited 之后，:active 之前。

:link 伪类，只有当a链接有href属性且是有效的链接，才会起作用，如下示例：

href属性改成上面这样时，：link不起作用，按理应该显示红色，但却显示绿色。

:hover 伪类可以在任何元素上使用，其用处很多，比如鼠标经过显示隐藏效果。

如下示例：

使用:hover 另一个典型的例子就是，制作下拉菜单，不需要使用JavaScript，如下示例：

demo 演示可以看这里：https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3700/3e1094a1c7b42332b9bdef0d0b0c4a7f/css_dropdown_menu.html

除了以上几种链接相关的伪类，还有一个突出显示当前活动的锚链接——:target 伪类。如下示例：

html

css

效果显示：

此类伪类都是和表单元素有关的，比如下面这些：

在这里介绍几个常用的，比如:checked，匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项)，如下示例：

html:

css

效果显示：

注意：不同的浏览器通过:checked伪类渲染出来的效果也不尽相同。

再看另一个 :disabled 伪类，匹配禁用的的表单元素，如下示例：

html：

css：

效果：

如上图，可以看到禁用输入框背景色是灰色。

这类伪类，是用来弥补css选择器的不足，比如如果我想选择当前元素里所有p元素最后一个怎么办？

相关伪类主要有如下这些：

first-*、last-*开头、nth-*、only-*的伪类，都是指所有元素节点下匹配的元素。

如下示例：

p:first-child 匹配所有节点中第一个子节点是<p>元素的节点。

代码：

效果：

同理，p:last-child 匹配所有节点中最后一个子节点是<p>元素的节点。

-of-type 结尾的伪类指特定类型的元素，和特定的元素位置无关，比如:first-child 和 :first-of-type的区别就是，前者匹配的元素必须是第一个子元素，后者只要是首次出现的就可以，通俗将就是前者是相对于父级计算位置，后者是相对于同级兄弟节点计算的。

如下示例：

效果：

如上图，p元素并非第一个子元素，这就是*-of-type伪类的特点。

only-开头的伪类是指唯一性，比如p:only-child 指其父元素下只有一个p元素时，且必须是第一个子元素，only-of-type 的区别就是不必是第一个子元素。

如下示例：

效果：

当给第一个段落同级加上其它元素，你会发现only-child就不起作用了。

这部分伪类，比较晦涩难懂，多加练习，一定要明白这几种直接的区别才行。

比如：root、：empty、等，还有其它处在实验阶段的伪类，在这里不一一介绍了。

关于伪类知识，可以参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

https://www.w3school.com.cn/css/css_pseudo_classes.asp

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com