伪类
一、超链接伪类
伪类 | 说明 |
---|---|
:link | 指代用作超链接的锚记(即具有href属性),而且尚未访问的地址 |
:visited | 指代指向已访问地址的超链接。处于安全考虑,能应用到已访问链接上的样式十分有限。 |
二、用户操作伪类
伪类 | 说明 |
---|---|
:focus | 指代当前获得输入焦点的元素,即可以接收键盘输入或以某种方式激活 |
:hover | 指代鼠标指针放置其上的元素,例如鼠标指针悬停在超链接上 |
:active | 指代由用户输入激活的元素,例如用户单机超链接时按下鼠标按键的那段时间 |
a:link{color: navy;}
a:visited{color: gray;}
a:focus{color: range;}
a:hover{color: red;}
a:active{color: yellow;}
通常推荐的顺序是“link-visited-hover-active”不过后来改成了“link-visited-focus-hover-active”
三、UI状态伪类
伪类 | 说明 |
---|---|
:enable | 指代启用的用户界面元素(例如表单元素),即接收输入的元素 |
:disable | 指代禁用的用户界面元素(例如表单元素),即不接受输入的元素 |
:checked | 指代由用户或文档默认选中的单选按钮或复选框狂 |
:indeterminate | 指代既未选中也没有未选中的单选按钮或复选框;这个状态只能由DOM脚本设定,不能由用户设定 |
:default | 指代默认选中的单选按钮、复选框或选项 |
:valid | 指代满足所有数据有效性语义的输入框 |
:invalid | 指代不满足所有数据有效性语义的输入框 |
:in-range | 指代输入的值在最小值和最大值之间的输入框 |
:out-of-range | 指代输入的值小于控件允许的最小值或大于控件允许的最大值的输入框 |
:required | 指代必须输入值的输入框 |
:optional | 指代无需一定输入值的输入框 |
:read-write | 指代可由用户编辑的输入框 |
:read-only | 指代不能由用户编辑的输入框 |
四、target伪类
http://www.w3.org/TR/css3-selectors/#target-pseudo
这个URL中的target-pseudo部分就是片段标识符,由#符号标记。如果对应的页面(http://www.w3.org/TR/css3-selectors/)中有ID为target-pseudo的元素,那个元素就是片段标识符的目标。
五、lang伪类
根据文本使用的语言选择元素,使用:lang()伪类。
*:lang(fr){font-style: italic;}
*[lang|="fr"]{font-style: italic;}
六、否为伪类
选择既不是列表项目也不是段落的元素
*.link:not(li):not(p){font-style: italic;}
七、装饰首字母
p::first-letter{color: red;}
八、装饰首行
p::first-line{font-size: 150%; color: purple;}
九、装饰(或创建)前置和后置内容元素
h2::before{content: "]]"; color: silver;}