1.没访问的a为橙色，访问过的为绿色。悬浮为蓝色，按下鼠标不松手为红色
a：link{
color:orange;
}
a:visited{
color:green;
}
a:hover{
color:blue;
}
a:active{
color:red;
}
注意实现顺序，顺序错误效果会覆盖，失效。LV HA
2.hover active所有元素都可以实现，link visted a元素独有
<span>百度</span>
span:hover{
color:green;
}
span:active{
color:red;
}
3.focus 表单类元素使用，焦点。
<input type="text>
input:focus{
color:blue;
}
4结构伪类
div>p：firstchild{
color:red;
}
让分数最高的元素变为红色。
<div>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<p>赵六：49分</p>
</div>
div p：first-child{
color:red;
}
让分数最高的元素变为红色。使用后代选择器，张三是孙子，使用后代选择器。
选择div的后代是p元素，其父亲是谁无所谓，但必须是父亲的第一个儿子
<div>
<p>李七</p>
<span><p>张三：99分</p></span>
<p>李四：90分</p>
<p>王五：66分</p>
<p>赵六：49分</p>
</div>
div>p：last-child{
color:red;
}
让分数最低的元素变为红色。
<div>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<p>赵六：49分</p>
</div>
让王五变为红色
div>p：nth-child(3){
color:red;
}
偶数变为红色
div>p：nth-child(2n){或even
color:red;
}
x奇数变为红色
div>p：nth-child(2n+1){或odd
color:red;
}
前五个元素变为红色
div>p：nth-child(-n+5){或even
color:red;
}
公式an+b
div>p：nth-child(4n+3){//n=0,1,2,3,4..选中3,7,11。。。。
color:red;
}
选中div子代第一个p元素
div>p：first-of-type{
color:red;
}
<div>
<span>测试</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<p>赵六：49分</p>
</div>
选中赵六
div>p：last-of-type{
color:red;
}
<div>
<span>测试</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
选中同类型的第n个元素
div>p：nth-of-type(n){
color:red;
}
<p>赵六：49分</p>
<span>测试2</span>
</div>
选中张三，倒序
div>p：nth-last-child(3){
color:red;
}
<div>
<span>测试</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
</div>
选中李四，倒序
div>p：nth-last-type(2){
color:red;
}
<div>
<span>测试</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<span>测试</span>
</div>
onlychild，选中测试1，未选中测试2
span:only-child{
color:red;
}
<div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<span>测试</span>
</div>
选中测试1，未选中2,3.
span:only-of-type{
color:red;
}
<div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<span>测试3</span>
</div>
html root选中根元素
：root{
background-color:red;
}
选中空元素
div:empty{
width:100px;
height:100px;
background-color:red;
}
<div></div>
否定伪类
选中div儿子p元素，排除fail类。
<div>
<span>测试2</span>
<p>张三：99分</p>
<p>李四：90分</p>
<p>王五：66分</p>
<p class="fail" title="你要加油啊！赵六">赵六：56分</p>
<p class="fail" title="你要加油啊！孙七">孙七：44分</p>
</div>
div>p：not(fail){
color:red;
}
选中div儿子p元素，排除以你要加油开头的元素
div>p:not([title^="你要加油啊!"]
选中div儿子p元素,排除第一个孩子
div>p:not(:firstchild){
color:red;
}
5.UI伪类
<input type="checkbox">
input:checked{
width:100px;
height:100px;
}
选中disabled的INput元素
input:disabled{
color:grey;
}
选中可用的元素
input:enabled{
color:green;
}
6.目标伪类
点击超链接对应的div变为绿色。
div:target{
background-color:green;
}
div{
background-color:grey;
}
<a href="#one">第一个</a>
<a href="#two">第二个</a>
<a href="#three">第三个</a>
<a href="#four">第四个</a>
<a href="#five">第五个</a>
<a href="#six">第六个</a>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
6.语言伪类
div:lang(en){
color:red;
}
div:lang（zh-CN）{
color:green;
}
:lang（zh-CN）{//不区分标签
color:green;
}
<div>新建分类</div>
<div>fenlei</div>
<p>博客</p>
<span>汇编</span>
7.伪元素选择器
选择div中第一个字符
div::first-letter{
color:red;
font-size:40px;
}
<div>Lorem</div>
第一行
div::fist-line{
background-color:yellow;
}
//被选中的元素
div::selection{
background-color:green;
color:orange;
}
input中的提示文字
input::placeholder{
color:skyblue;
}
添加人民币标识
<div>199</div>
<div>299</div>
<div>399</div>
<div>499</div>
p::before{
content:"￥"
}
p::after{
content:".00"
}
