16.CSS选择器【下】
第十三章 CSS选择器【下】
一、伪类选择器总汇
二、结构性伪类选择器 ：能够根据元素在文档中的位置选择元素，这类元素都有一个前缀（:）
1、根元素选择器 :（基本不怎么用，因为总是返回<html>元素）
2、子元素选择器 :（伪类都需要加上前置来限制范围）
（1） <ul><li></li><li></li>....</li> //第一组<li>..</li>为红色
例： ul > li:first-child{
color:red;
}
（2） 最后用一组为红色
例： ul > li:last-child{
color:red;
}
（3） 只能是只有一个元素的那个子元素
例： ul > li:only-child{
color:red;
}
（4）（如果有多组div时，第一组div里有多种元素类型且每种只有一个，那么，这一组的div第一行变红）
例： div > p:only-of-type{
color:red;
}
3、nth-child（n）系列
例： ul > li:nth-child(2){ //第二组为红色
color:red;
}
4、
例： ul > li:nth-last-child(2){ //倒数第二组为红色
color:red;
}
5、选择特定子元素的第二个元素（每组div里第二个p元素变为红色，如果没有第二个p元素，这没什么变化）
例： div > p:nth-of-type(2){ //
color:red;
}
6、选择特定子元素的倒数第二个元素
例： div > p:nth-last-of-type(2){
color:red;
}
三、UI伪类选择器
1、:enabled 选择启用状态的元素；
2、:disabled 选择禁用状态的元素；
3、:checked 选择勾选的input元素；
4、:default 从一组类似的元素中选择默认元素。比如input勾选的既默认的。
5、:valid和:invalid 输入验证合法和不合法显示时选择的元素。
input:valid{ input:invalid{
border:1px solid blue; border:1px solid red;
} }
//输入正确，输入框为蓝色，输入格式错误，则输入框为红色
6、:required （必填字符）和:optional （可以不填写）
四、动态伪类选择器
1、:link (表示未访问的超链接)和:visited（表示已访问的超链接）
2、:hover 表示鼠标悬停在超链接上 （悬停的意思是放在按钮上但是不点击，会变色）
3、:active 表示鼠标按下超链接时 （点下去但是不松开，会变色）
4、:focus 针对文本框，获取光标的时候，会变成设计的颜色
五、其他伪类选择器
1、:not 否定选择器，反选, //除了含有baidu的网址，其他都为红色
a:not([href*="baidu"]){
color:red;
}
2、:empty 匹配没有任何内容的元素 （空元素的隐藏属性是换行）
:empty{
display:none; //把空元素隐藏
}
3、:lang
:lang(en){color:red;}
4、:targer 定位到锚点的时候使用此元素
