■常见的伪类有
□动态伪类(dynamic pseudo-classes) □结构伪类(structural pseudo-classes)
√:link、visited、:hover、:active、:focus √:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
□目标伪类(target pseudo-classes) √:first-child、:last-child、:first-of-type、:
√:targei last-of-type
√:root、:only-child、:only-of-type、:last-
□语言伪类(language pseudo-classes) of-type
√:lang()
□否定伪类(negation pseudo-classes)
□元素状态伪类(UI element states pseudo-classes) √:ont()
√:enabled、 :disabled、:checked
动态伪类(dynamic pseudo-classes)
■使用举例
□a:link 未访问的链接
□a:visited 已访问的链接
□a:hover鼠标挪动到链接上
□:active 激活的链接(鼠标在链接上长按住未松开)
■使用注意
□:hover必须放在:link和:visited后面才能完全生效
□:active必须放在:hover后面才能完全生效
□所以建议编写顺序是:link、:bisited、:hover、:active
□记忆:女朋友看到lv后,ha ha 大笑
- 除了a元素, :hover , :active也能用在其他元素上
动态伪类-:focus
- :focus指当前拥有输入焦点的元素(能接收键盘 输入)
- 文本输入框焦点,背景就会变红色
□因为链接a元素可以被键盘的tab键选中聚焦,所以:focus也适用于a元素
- 动态伪类编写顺序建议为
□:link , :bisited , :focus , :hover , :active
□ 记忆: 女朋友看到lv包包后,(feng)疯一样地ha ha 大笑