伪类对元素进行分类是基于特征 (characteristics) 而不是它们的名字, 属性或者内容; 原则上特征是不可以从文档树上推断得到的.
CSS 伪类是用来添加一些选择器的特殊效果.
解释: 在感觉上伪类可以是动态的, 当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类. 例外的是 ":first-child" 能通过文档树推断出来,":lang" 在一些情况下也在从文档树中推断出来.
由此可以看出, 它的功能和 class 有些类似, 但它是基于文档之外的抽象, 所以叫伪类.
何为伪类? 就是 CSS 内置类 CSS 内部本身赋予它一些特性和功能, 也就是你不用再 class=... 或 id=... 你就可以直接拿来使用, 当然你也可以改变它的部分属性比如: a:link{color:#FF0000;}
CSS 伪类有 6 种, 分别为: 动态伪类, 目标伪类, 语言伪类, 元素状态伪类, 结构伪类, 否定伪类.
1, 动态伪类
不同的状态, 使用不同的样式.
E:link: 选择匹配的 E 元素, 而且匹配元素被定义了超链接并未被访问过. 常用于链接描点上
E:visited: 选择匹配的 E 元素, 而且匹配元素被定义了超链接并已被访问过. 常用于链接描点上
E:active: 选择匹配的 E 元素, 且匹配元素被激活. 常用于链接描点和按钮上
E:hover: 选择匹配的 E 元素, 且用户鼠标停留在元素 E 上. IE6 及以下浏览器仅支持 a:hover
E:focus : 选择匹配的 E 元素, 而且匹配元素获取焦点
动态伪类包括两种形式:
锚点伪类, 这是一种在链接中常见的样式, 如: link,:visited
行为伪类, 也称为用户操作伪类, 如: hover,:active 和: focus
2, 结构伪类
这个就比较多了, 平时用的也比较频繁.
E:fisrt-child : 作为父元素的第一个子元素的元素 E. 与 E:nth-child(1)等同
E:last-child : 作为父元素的最后一个子元素的元素 E. 与 E:nth-last-child(1)等同
E:root : 选择匹配元素 E 所在文档的根元素. 在 html 文档中, 根元素始终是 HTML, 此时该选择器与 HTML 类型选择器匹配的内容相同
E F:nth-child(n): 选择父元素 E 的第 n 个子元素 F. 其中 n 可以是整数(1,2,3), 关键字(even,odd), 可以是公式(2n+1), 而且 n 值起始值为 1, 而不是 0.
E F:nth-last-child(n): 选择父元素 E 的倒数第 n 个子元素 F. 此选择器与 E:nth-child(n)选择器计算顺序刚好相反, 但使用方法都是一样的, 其中: nth-last-child(1)始终匹配最后一个元素, 与 last-child 等同
E:nth-of-type(n) : 选择父元素内具有指定类型的第 n 个 E 元素
E:nth-last-of-type(n): 选择父元素内具有指定类型的倒数第 n 个 E 元素
E:first-of-type: 选择父元素内具有指定类型的第一个 E 元素, 与 E:nth-of-type(1)等同
E:last-of-tye : 选择父元素内具有指定类型的最后一个 E 元素, 与 E:nth-last-of-type(1)等同
E:only-child : 选择父元素只包含一个子元素, 且该子元素匹配 E 元素
E:only-of-type: 选择父元素只包含一个同类型子元素, 且该子元素匹配 E 元素
E:empty: 选择没有子元素的元素, 而且该元素也不包含任何文本节点
结构伪类选择器, 可以根据元素在文档中所处的位置, 来动态选择元素, 从而减少 HTML 文档对 ID 或类的依赖, 有助于保持代码干净整洁.
结构伪类选择器很容易遭到误解, 需要特别强调. 如:
p:first-child;
它表示的是: 选择父元素下的第一个子元素 p, 而不是选择 p 元素的第一个子元素.
注意:
结构伪类选择器中, 子元素的序号是从 1 开始的, 也就是说, 第一个子元素的序号是 1, 而不是 0. 换句话说, 当参数 n 的计算结果为 0 时, 将不选择任何元素.
3, 语言伪类
E: lang(language): 用来匹配使用指定语言的元素.
4, 元素状态伪类
当元素处于某种状态下时, 才起作用, 在默认状态下不起作用.
E:checked: 匹配每个选中的输入元素(仅适用于单选按钮或复选框).
input[type="checkbox"]:checked{}
E:enabled: 匹配每个启用的的元素(主要用于表单元素).
input[type="text"]:checked{}
E:disabled: 匹配每个禁用的的元素(主要用于表单元素).
input[type="text"]:disabled{}
5, 目标伪类
用来匹配页面的 URI 中某个标识符的目标元素.
E:target: 选择匹配 E 的所有元素, 且匹配元素被相关 URL 指向.
URL 带有后面跟有锚名称 #, 指向文档内某个具体的元素. 这个被链接的元素就是目标元素(target element).
6, 否定伪类
E:not(F): 匹配所有除 F 外的 E 元素
例: 对 form 中所有 input 加边框, 但又不想 submit 也起变化, 就可以这样写:
input:not([type="submit"]) {border: 1px solid red;}
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16548.html