属性选择器：（功能大于特性）
例子：
^（以什么开头） $（以什么结尾） *（一个或多个）
li[class ^='demo']{} ---> 选中li中以demo开头的clas类名
li[class $='demo']{} ---> 选中li中以demo结尾的clas类名
li[class *='aa']{} ---> 选中li中以aa（一个或多个）为内容的clas类名
div[name='aaa'] {}---> 选中div中name是aaa的 ， （自己添加的属性也可以选出来）
初级伪类选择器：伪类用于向某些选择器添加特殊的效果。
1.root 根标签选择器
“:root”选择器等同于<html>元素，
简单点说：:root{background:orange} html{background:orange} 得到的效果等同 建议使用:root（xml等）
当文档是xml文件的时候:root 选择器还能用。
2.:not 否定选择器
用法和jQuery 中的not类似，可以排除某些特定条件的元素
div:not([class=“demo”]){ background-color:red; } 意思为除了class为demo的div以外，所有的div的背景颜色都变红
3.empty 空标签选择器
用来选择没有内容的元素、不在文档树中的元素，这里的没有内容指的是一点内容都没有，哪怕是一个空格。
div:empty {background-color:red; } //div中内容为空的添加背景颜色
4.target 目标元素选择器
用来匹配被location.hash 选中的元素(即锚点元素) 选择器可用于选取当前活动的目标元素
<a href="#a"></a>
<div id="a"></div> //因为在a标签是div的锚点。所以点击a的时候回跳到这个div位子。div是锚点元素
div:target {background-color:red; } //修改锚点元素的背景颜色
5伪类选择器
选择父子关系的某个元素（没有类型限制）
:first-child 第一个子元素 :
:last-child 最后一个子元素
:nth-child(n){} 第xxx个子元素，n代表变量自然数
:nth-last-child(){} 从后往前数
以上四个选择器均有弊端，即如果当前位置元素不是前面所修饰的元素，那么无效 注：其父元素的第 N 个子元素，不论元素的类型。
6常用的伪类类型选择器：
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(){} 第xxx个子元素，n代表变量自然数
:nth-last-of-type(){} 从后往前数
此种选择器，限制了类型（如从div这一类选择器中选出第几个），即在所修饰元素的类型下选择特定位置的元素。
7 :only-child 唯一子元素选择器
选择是独生子的子元素，即该子元素不能有兄弟元素，它的父元素只有他一个直接子元素。 注意：选择的元素是独生子子元素，而非有唯一子元素的父元素。
:only-of-type 如果要选择第某类特定的子元素(p) 在兄弟节点中是此类元素唯一个的话 就需要用到这个属性了
8 :enabled 可用的元素
:disabled 不可用的元素 在web的表单中，有些表单元素有可用（“enabled”）和不可用（“disabled”）状态，比如输入框，密码框，复选框等。在默认情况下，这些表单元素都处在可用状态。那么我们可以通过伪类选择器 enabled 进行选择，disabled则相反。
input:disabled{……} 输入框变成不可输入。
9 :checked 选择框的被选中状态
注：checkbox, radio 的一些默认状态不可用属性进行改变，如边框颜色。
//一下代码点击input按钮改变了他兄弟节点的div的样式。
input:checked + div{
width: 100px;
height: 100px;
background: chartreuse;
}
10 :read-only 选中只读的元素
eg:<input type=“text” readonly=“readonly”/>
:read-write 选中非只读的元素 （默认）
eg:<input type=“text”/>
伪元素选择器：
CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个: 也就是现在变成了::first-letter,::first-line,::before,::after
另外还增加了一个::selection
“::selection” 选择器是用来匹配突出显示的文本（用鼠标选择文本的时候）。浏览器默认情况下，用鼠标选择网页文本是以“蓝色的北京，白色的字体”显示的。 属性：user-select: none（不可选中文本）; 注：火狐下必须加-moz- -moz-::selection
例 div::selection{color:red} //div内容被选中。字体颜色变为红色
元素选择器
E > F an F element child of an E element 直接子元素
E + F an F element immediately preceded by an E element 后面的紧挨着的兄弟节点
E ~ F an F element preceded by an E element 后面的兄弟节点
小demo无JS选项卡
主要通过input：checked 属性（当改变input这属性可以间接来操作其他元素）
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
text-align: center;
margin: 0 auto;
border: 1px solid #000;
}
.wrapper div {
position: absolute;
top: 30px;
left: 0;
width: 300px;
height: 270px;
line-height: 300px;
display: none;
}
.wrapper input {
width: 30px;
height: 30px;
}
.wrapper div:nth-of-type(1) {
background-color: #f40;
}
.wrapper div:nth-of-type(2) {
background-color: #999;
}
.wrapper div:nth-of-type(3) {
background-color: #FF0;
}
input:checked + div{
display: block;
}
</style><div class="wrapper" >
<input type="radio" name="a" checked>
<div>1</div>
<input type="radio" name="a">
<div>2</div>
<input type="radio" name="a">
<div>3</div>
</div>