CSS 中什么是伪类选择器? 伪类选择器是什么意思? 下面本篇文章就来给大家介绍一下 CSS 伪类选择器, 让大家可以了解在 CSS 中伪类选择器的作用, CSS 伪类选择器有哪些分类等知识, 希望对大家有所帮助.
一, 伪类选择器介绍
伪类选择器 (简称: 伪类) 通过冒号来定义, 它定义了元素的状态, 如点击按下, 点击完成等, 通过伪类可以为元素的状态修改样式.
CSS 伪类用于向某些选择器添加特殊的效果.
伪类的功能和一般的 DOM 中的元素样式相似, 但和一般的 DOM 中的元素样式不一样, 它并不改变任何 DOM 内容. 只是插入了一些修饰类的元素, 这些元素对于用户来说是可见的, 但是对于 DOM 来说不可见. 伪类的效果可以通过添加一个实际的类来达到.
二, 伪类选择器的分类
伪类选择器主要可以分为: 动态伪类选择器, UI 元素状态伪类选择器, 结构伪类选择器, 否定伪类选择器.
下面详细介绍这些分类的选择器语法:
1, 动态伪类选择器语法
E:link(链接伪类选择器): 选择匹配的 E 元素, 而且匹配元素被定义了超链接并未被访问过. 常用于链接描点上
E:visited(链接伪类选择器 ): 选择匹配的 E 元素, 而且匹配元素被定义了超链接并已被访问过. 常用于链接描点上
E:active(用户行为选择器): 选择匹配的 E 元素, 且匹配元素被激活. 常用于链接描点和按钮上
E:hover (用户行为选择器): 选择匹配的 E 元素, 且用户鼠标停留在元素 E 上. IE6 及以下浏览器仅支持 a:hover
E:focus (用户行为选择器): 选择匹配的 E 元素, 而且匹配元素获取焦点
动态伪类选择器可以用于超链接 a 标签的应用中:
a 标签有 4 种伪类(即对应四种状态), 如下:
:link "链接": 超链接点击之前
:visited "访问过的": 链接被访问过之后
:hover "悬停": 鼠标放到标签上的时候
:active "激活": 鼠标点击标签, 但是不松手时.
代码示例:
- /* 让超链接点击之前是红色 */
- a:link {
- color: red;
- }
- /* 让超链接点击之后是橙色 */
- a:visited {
- color: orange;
- }
- /* 鼠标悬停, 放到标签上的时候是绿色 */
- a:hover {
- color: green;
- }
- /* 鼠标点击链接, 但是不松手的时候 */
- a:active {
- color: black;
- }
a 标签的这四种伪类选择器存在着一定的顺序, 各个样式之间的顺序很有讲究, 一旦出现排列错误就很有可能形成覆盖, 导致其中某个样式无法显示. 那么 a 标签的这四种伪类选择器需要怎样排序才可以使用?
在 CSS 定义中, a:hover 必须被置于 a:link 和 a:visited 之后, 才是有效的, a:active 必须被置于 a:hover 之后, 才是有效的.
所以, a 标签的这四种伪类选择器的顺序为: a:link ,a:visited,a:hover ,a:active
2,UI 元素状态伪类选择器
E:checked(选中状态伪类选择器): 匹配选中的复选按钮或者单选按钮表单元素
E:enabled(启用状态伪类选择器 ): 匹配所有启用的表单元素
E:disabled(不可用状态伪类选择器): 匹配所有禁用的表单元素
UI 元素状态伪类选择器主要是针对于 html 中的 Form 元素进行操作, 最常见的比如我们 "type="text"有 enable 和 disabled 两种状态, 前者为可写状态后者为不可状态; 另外"type="radio" 和 "type="checkbox""有"checked"和"unchecked"两种状态. 来看两个实例, 比如说你想将"disabled" 的文本框与别的文本框区别出来, 你就可以这样应用:
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
注意: IE6-8 不支持 ":checked",":enabled",":disabled" 这三种选择器.
3, 结构伪类选择器
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 时, 将不选择任何元素.
4, 否定伪类选择器
E:not(F): 匹配所有除元素 F 外的 E 元素
例: 对 form 中所有 input 加边框, 但又不想 submit 也起变化, 就可以这样写:
input:not([type="submit"]) {border: 1px solid red;}
来源: http://www.css88.com/qa/css3/13478.html