HTML与CSS3伪元素和伪类详解

标签:2024-05-19 12:11:32

一、伪类(pseudo classes)

  用于已有元素处于某种状态时为其添加对应的样式,但是通过DOM树又无法表示这种状态,就可以通过伪类来为其添加样式。

例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般CSS相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式。

常见的状态伪类

:link 应用于未被访问过的链接;

:hover 应用于鼠标悬停到的元素;

:active 应用于被激活的元素;

:visited 应用于被访问过的链接,与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

二、伪元素(pseudo elements)

  用于创建一些不在DOM树中的元素,并为其添加样式。

  例如:我们可以通过:before来在一个元素之前添加一些文本,并为这些文本添加样式,虽然用户可以看见这些文本,但是它实际上并不在DOM文档中。

常见的结构性伪类

:first-child 选择某个元素的第一个子元素;

:last-child 选择某个元素的最后一个子元素;

:nth-child(n) 匹配属于其父元素的第 n个子元素,不论元素的类型;

:nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素,不论元素的类型;

:nth-of-type() 规定属于其父元素的第n个 指定 元素;

:nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素;

:first-of-type 选择一个上级元素下的第一个同类子元素;

:last-of-type 选择一个上级元素的最后一个同类子元素;

:only-child 选择它的父元素的唯一一个子元素;

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:checked匹配被选中的input元素,这个input元素包括radio和checkbox。

:empty 选择的元素里面没有任何内容。

:disabled匹配禁用的表单元素。

:enabled匹配没有设置disabled属性的表单元素。

:valid匹配条件验证正确的表单元素。

:in-range选择具有指定范围内的值的 input 元素。

:optional选择不带 "required" 属性的 input 元素。

:focus选择获得焦点的 input 元素。

三、区别

它们的区别是有没有创建一个DOM树之外的元素。

伪类:用于已有元素处于某种状态时为其添加对应的样式。

伪元素:用于创建一些不在DOM树中的元素。

可以同时使用多个伪类,但是只能同时使用一个伪元素。

原文出处:http://www.dongblog.com/notes/91.html
来源:博客网 转载请注明出处!

活跃用户

憨憨
Ta还没有签名
眉目里
Ta还没有签名
小宇宙配太空
Ta还没有签名
谛道文化
Ta还没有签名

友情链接


Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093

Warning: Smarty error: unable to read resource: "../../../templates/default/./common/foot/footer_index.htm" in /usr/home/hyu3925200001/htdocs/common/smarty/Smarty.class.php on line 1093