CSS3选择器主要包含以下几种
子元素选择器
E > F类型，子元素选择器选中的是子元素F，子子孙孙不会被选
而后代选择器E F类型是选中所有的F，包含F的后代也选中
兄弟选择器
相邻兄弟选择器
E + F类型，必备属性：1.必须同级；2.必须相邻；3.必须在其下方；4.有且只有一个符合。
通用兄弟选择器
E ~ F类型，必备属性：1.必须同级；2.必须在其下方；3.可以有多个符合。
属性选择器
[ ]类型，例如[class]指具有class属性的值
[abc ="value"]类型，属性和值选择器
[abc ~="value"] ~表示几个以空格隔开的属性值中包含了”value”
[abc ^="value"] ^以value开头的值
[abc $="value"] $以value结尾的值
[abc *="value"] *包含value的值
[abc |="value"] |以value或value-开头的值
[abc =value]和[abc *="value"]较实用。
伪类选择器
锚点伪类（a的伪类）
简称爱恨法则 love & hate
l = link 没有访问过的状态
v = visited 访问过后的状态
h = hover 鼠标悬浮在标签上的状态
a = active 鼠标悬浮在标签上按下没有松开的状态
使用时候顺序不能变，必须从前到后。
UI元素伪类 表单元素
disabled 废弃属性，元素不可用
focus 聚焦属性
checked 选中(并不能完美支持)
enabled 可用状态
<style>
input:disabled{
border:2px solid blue;
background-color:gold;
}
input:focus{
border:2px solid red;
}
input:checked{
display:block;
width:50px;
height:50px;
}
input:enabled{
background-color:pink;
}
</style>
<form>
<input type="text" disabled />
<input type="text"/>
<input type="text"/>
<input type="checkbox"/>
<input type="checkbox"/>
</form>
否定选择器
:not类型，通常和属性选择器结合使用。
<style>
input:not([type="submit"]){
border:2px solid gold;
}
</style>
<form>
<input type="text"/>
<input type="submit"/>
</form>
效果如下：
nth选择器
:first-child选择某个元素的第一个子元素
last-child选择某个元素的最后一个子元素
nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-of-type()选择指定的元素
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算
:first-of-type选择一个上级元素下的第一个同类子元素
:last-of-type选择一个上级元素的最后一个同类子元素
:only-child选择的元素是它的父元素的唯一一个子元素
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty选择的元素里面没有任何内容
因属性较多，后面属性设置会覆盖前面，就不在一一展现，仅列举几个
<style>
ul li:first-child{
background-color:black;
}
ul li:last-child{
background-color:pink;
}
ul li:nth-of-type(3){
background-color:blue;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
效果如下：
:nth-child()选择某个元素的一个或多个特定的子元素
:nth-child(length)参数是具体数字
:nth-child(n)参数是n,n从1开始计算
:nth-child(2n)n的倍数选择，n从1开始算(偶数行也可用even)
:nth-child(2n+1)表示隔几选一(奇数行也可用odd)
:nth-child(n+length)选择大于等于length后面的元素
:nth-child(-n+length)选择小于等于length前面的元素
伪元素
::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多
::first-line选择元素的第一行
::before,::after这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动还有图片icon
::selection用来改变浏览网页选中文本的默认效果，::selection只能设置两个属性background,color属性，设置其他属性是没有任何效果的
<style>
div{
width:500px;
height:500px;
background-color:green;
margin:0 auto;
font-size:30px;
position:relative;
font-size:30px;
}
div::before{
content:"";
width:200px;
height:200px;
background-color:orange;
display:block;
position:absolute;
top:60px;
left:0;
}
div::after{
content:"";
width:200px;
height:200px;
background-color:gold;
display:block;
position:absolute;
right:0;
top:0;
}
div::first-letter{
color:red;
font-size:60px;
}
div::first-line{
color:purple;
}
div::selection{
color:white;
background:black;
}
</style>
<div>我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>
效果如下：
