第八篇 伪类选择器之动态伪类与UI状态伪类

438 阅读6分钟

动态伪类

定义

与网页文档的结构有关,但是会根据文档的动态变化而改变选中内容的伪类为动态伪类。该类伪类很难仅仅通过文档的标记来准确推测出选择器选中的为哪些元素。

超链接伪类

定义

CSS2.1中定义的2个只能在超链接上使用的伪类。

HTML中对a元素生效,XML中对链接其他资源的元素起效。

未访问过的地址:link

选择器x:link

若是选择器x选中的元素为一个a元素吗,且该链接没有被访问过,那么上述代码中的选择器可选中该元素。

已访问过的地址:visited

选择器x:visited

若是选择器x选中的元素为一个a元素吗,且该链接之前已经被被访问过,那么上述代码中的选择器可选中该元素。

应用实例

其实之前使用过百度都可能会遇到,有一个结果词条被点开后,浏览完点开的网页后,回退到搜索页面时,你会发现之前点击的词条由原来蓝色变为了紫色。这是因为这个链接的状态由:link转变为:visited

基于安全的限制

由于不法脚本可能会根据:visited的加粗字体样式采集到用户访问的网站信息,甚至可以得到用户访问了哪些在线银行。

所以现在浏览器上会做如下处理:

  • 只能为:visited在伪类的样式声明中设置与颜色相关的属性。除此之外的所有样式规则都会被忽略。

  • 通过DOM查询已访问链接的样式,返回的值和未访问时的样式是一样的。【比如:link指定字体颜色为红,:visited指定颜色为蓝,在DOM获取已访问的链接的样式值时,明明文档的效果是蓝,但实际DOM接收到的值为红。】

用户操作伪类

应用范围

除了可以应用在超链接元素上之外,其他元素也大部分可以使用。

焦点元素:focus

该伪类选中的元素为当前文档中获得焦点的元素。

例如: input:focus指若是聚焦的元素为input元素类型时,该元素被选择器选中。

游标悬浮元素:hover

该伪类选中的元素为当前文档中鼠标游标悬浮的元素。

被激活的元素 :active

该伪类选中用户输入激活的元素,比如用户单击超链接按下鼠标不松开的时候,此时超链接元素为被激活的元素。

用在超链接上时的注意事项

书写顺序导致的问题

因为css的层叠值是和css代码的书写顺序有一定关系的。相同特指度且相同来源【用户代理样式表、用户样式表和作者样式表】的情况下,靠后的css代码优先级高。

而一个超链接的状态可以被概括为点击过或是未点击过这两种。若是同时对超链接使用两个超链接伪类和这些用户操作伪类,那么如果将:link:visited写在最后面,这两个状态的样式就会覆盖所有的用户操作伪类的样式。

以下内容是MDN给我们的建议:

为了可以正确地渲染链接元素的样式,:link 伪类选择器应当放在其他伪类选择器的前面,并且遵循 LVHA 的先后顺序,即::link — :visited — :hover — :active

:focus伪类选择器常伴随在:hover伪类选择器左右,需要根据你想要实现的效果确定它们的顺序。

动态样式引起的重绘

若是像鼠标悬浮元素会将对应元素的文字变大或是其他引起文档结构改变的变化,会导致文档中该元素后面的元素进行重绘,这样会损耗性能。

UI状态伪类

作用

这些伪类根据用户界面元素的当前状态应用样式。

被启用的元素:enabled

选中任何被启用的(enabled)元素。

如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用的。

被禁用的元素:disabled

选中任何被禁用的(disabled)元素。

元素的禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。禁用可以通过dom操作,或是使用H5元素的Boolean属性:disabled来实现。

被选中的单复选框:checked

选中处于选中状态的单选框或复选框【input的type为checkboxradio以及select元素的option元素】元素。

若是想选中 没有处于选中状态的元素,可以借助:not()伪类完成。

比如下图:

image.png

被选中的元素项为红色的字体。

状态不确定的表单元素:indeterminate

:indeterminate 该伪类选中状态不确定的表单元素,这个状态只能由DOM脚本来设定,不可由用户来手动设定。这个状态出现的目的是为了提醒用户应该选中某个元素。

image.png

默认选中的表单元素:default

该伪类可以在<button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用,选中默认值选项。

image.png 当例子中的选中值发生改变后的效果如下

image.png

允许多个选择的分组元素也可以具有多个默认值。

选择有效值表单元素:valid与选择无效值表单元素:invalid

:valid  会选中内容通过验证的 <input>元素或其他表单元素

:invalid  会选中任意内容未通过验证的 <input>元素或其他表单元素。

此处的通过以及未通过是根据HTML元素本身性质特性来说的,比如type为email的<input>元素,若是内容为非法email结构,那么:valid就无法选中该元素,反之:invalid可以选中。

输入值在指定范围间的input元素:in-range与输入值不在指定范围间的input元素out-of-range

out-of-range选中当前值处于属性 minmax限定的范围外的<input>元素。

out-of-range选中当前值处于属性 minmax限定的范围内的<input>元素。

必须输入值的表单元素:required与无需一定输入值的表单元素:optional

:required选中设置了required属性的<input><select>, 或 <textarea>元素。

:optional选中没有设置required属性的<input><select>, 或 <textarea>元素。

可以编辑的元素:read-write与只读的元素:read-only

:read-only选中处于不可被用户编辑的状态的元素

image.png

:read-write选中处于可被用户编辑的状态的元素

image.png