CSS 伪类 (Pseudo-classes)


CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

IE- 表示只有IE游览区不支持. IE7+ 表示从IE7开始支持.

:active 鼠标访问状态 IE8+

CSS伪类匹配被用户激活的元素。 从IE8才开始支持所有元素, 之前只支持a标签.

当用鼠标交互时,它代表的是用户按下按键和松开按键之间的时间。

:active 伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTML元素。

LVHA顺序: :link — :visited — :hover — :active。

body { background-color: #ffffc9 }
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接, 点击过 */
a:hover { font-weight: bold } /* 用户鼠标悬停, 经过 */
a:active { color: lime } /* 激活链接, 按下 */

:hover 悬停在元素上 IE7+

为了确保生效,:hover规则需要放在:link和:visited规则之后,但是在:active规则之前, 从ie7开始支持所有元素.

查看示例 - 无需js的交互

在触摸屏上 :hover 有问题,基本不可用

:checked 选中状态 IE9+

CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。

查看示例- 使用隐藏的checkboxes来存储一些CSS布尔值, 实现交互隐藏与显示元素.
input[type="radio"]:checked - 表示页面上的所有选中的radio按钮
input[type="checkbox"]:checked - 表示页面上的所有选中的checkbox按钮
option:checked - 表示页面上的所有选中的select的选项
				

:disabled 被禁用 IE9+

CSS 伪类表示任何被禁用的元素。对应元素的`disabled` 属性,如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。

:enabled 启用 IE9+

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

:empty 空元素 IE9+

CSS 伪类 代表没有子元素的元素。 空(只允许有html注解), 不空(内部有字符串, 无内容但有空格或换行)

:first-child 兄弟元素中的第一个元素 IE7+

代表了一组兄弟元素中的第一个元素。在level3实现中,被匹配的元素需要具有一个父级元素,而在level4实现中则不需要。

匹配: 某个元素内的第一个元素. 例如ul:first-child{}

:first-of-type 兄弟元素中其类型的第一个元素 IE7+

匹配: 某个元素内第一个出现的P元素. 不管在兄弟内的位置. 例如p:first-of-type{}

:last-child 父元素的最后一个子元素 IE9+

ul:last-child{} ul中最后一个元素.

:last-of-type 父元素显示的最后一个指定元素 IE9+

div p::last-of-type{} div中最后一个p元素, p元素之后可能还有其他元素.

:focus 获得焦点的元素 IE8+

当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

如果要选择包含焦点元素的元素,请使用:focus-within 。

:not(X) 排除x选择器以外的所有元素 IE9+

div :not(p){} 匹配div内, 非p元素.

p:not(.fancy){} 匹配类名不是 `.fancy` 的 p 元素

body :not(div):not(span){} 匹配 非 div 或 span的元素

body :not(.crazy, .fancy){} 匹配 类名不是 `.crazy` or `.fancy` 的元素 注意,此语法尚未被较好地支持。

:nth-child(an+b) 自定义选择兄弟节点的元素 IE9+

示例:

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的,可根据喜好任选其一来使用。)
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13...的元素。
a 和 b 都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。

tr:nth-child(2n+1)
表示HTML表格中的奇数行。
tr:nth-child(odd)
表示HTML表格中的奇数行。
tr:nth-child(2n)
表示HTML表格中的偶数行。
tr:nth-child(even)
表示HTML表格中的偶数行。
span:nth-child(0n+1)
表示子元素中第一个且为span的元素,与 :first-child 选择器作用相同。
span:nth-child(1)
表示父元素中子元素为第一的并且名字为span的标签被选中
span:nth-child(-n+3)
匹配前三个子元素中的span元素。
				

:nth-last-child(an+b) 自定义选择兄弟节点的元素(从尾部开始) IE9+

tr:nth-last-child(-n+4)
匹配HTML表格中的最后四行。
span:nth-last-child(even)
从后往前数,匹配所有偶数位置且为span的元素。
				

:nth-last-of-type(an+b) 自定义选择兄弟节点的元素(尾部, 限定元素) IE9+

span:nth-last-of-type(2) {}	
				

:nth-of-type() 自定义选择兄弟节点的元素(首部, 限定元素) IE9+

:any-link: IE- , 匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此,它会匹配到所有的 :link 或 :visited。
:default: IE-, 该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。 默认选中元素的样式. :first: IE8+打印文档的时候,第一页的样式。
:fullscreen: IE11+ 应用于当前处于全屏显示模式的元素。 需兼容 :-webkit-full-screen{}:-moz-full-screen{}:-ms-fullscreen{}:fullscreen{}
:in-range IE- 代表一个 input 元素,其当前值处于属性min 和max 限定的范围之内.
:invalid 表示任意内容未通过验证的input或其他form元素 .
:lang() CSS 伪类基于元素语言来匹配页面元素。