css 伪元素选择器

1 伪元素选择器
（1）根元素选择器
：root {
boredr:1px solid red;
}
匹配文档中根元素

（2）子元素选择器
ul > li : first-child {
color:red;
}
选择第一个子元素

lu > li : last-child {
color:red;
}

选择最后一个子元素

（3）UI元素选择器
UI 伪类选择器是根据元素的状态匹配元素
:enabled {
border: 1px solid red;
}
选择启用状态的元素

:disabled {
border: 1px solid red;
}
选择禁用状态的元素

:checked {
display: none;
}
选择勾选的input 元素

:default {
display: none;
}
从一组类似的元素中选择默认元素。比如input 被勾选的即默认的

合法
input:valid {
border: 1px solid blue;
}
不合法
input:invalid {
border: 1px solid green;
}
输入验证合法与不合法显示时选择的元素。

input:required {
border: 1px solid blue;
}

input:optional {
border: 1px solid green;
}
根据是否具有required 属性选择元素

2 动态伪类选择器

（1）未访问
a:link {
color:red;
}

（2）已经访问
a : visited {
color : orange;
}

（3）鼠标悬停在超链接上
a : hover {
color:blue;
}

（4）按下激活
a : active {
color : green;
}

(5)获得焦点时
: focus {
border: 1px solid red;
}