input readonly css 收藏 0

精通 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

那些容易被你忽略的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中容易混淆的属性，你有收获吗？

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