emsp;emsp;在CSS中，hover、active等是CSS中最常用也是最基础的伪类操作，除伪类操作之外，还有伪类元素(before,after)，当我们使用伪类元素的时候，需要同时在CSS样式中使用content，content中的内容是一个行内元素（文本状态），不支持设置宽高，当我们对带伪类元素的进行操作的时候，可以通过对该样式添加一个float:left，就可以对该样式的宽高进行操作了。
.fs{
width:200px;
height:200px;
background:red;
margin-top:200px;margin-left:200px;
position:relative；
}
.fs:before{
width:100px;
height:100px;
background:green;
float:left;
position:absolute;
left:0%;
}
emsp;emsp;当我们对带有伪类元素的样式添加position的时候，如果对其left等进行操作，此时该样式的父级是body，所以当我们对带有伪类元素的样式进行操作的时候，需要对他的父级元素添加position:relative;
emsp;emsp;带after和带before两个伪类元素的样式使用基本上是一致的，只不过一个在前一个在后。带伪类元素的样式不是一个真的元素，只是对主元素的一个附属。
emsp;emsp;在CSS3中，相邻选择器是一个“+”，当我们需要使用的时候，只需要将已知的元素后面加上“+”以及元素名称即可。相邻选择器只会选择同级元素的后面的第一个元素。
//ex:
style{.fs{color:red;} .fs+li{color:blue;}}
body{
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
}
emsp;emsp;相邻选择器只能向后选择，不能向前选择。但是相邻选择器可以叠加使用
.fs+li+li+li{
color:green;
}
.fs+li+.sky>span{color:white;}
emsp;emsp; 兄弟选择器使用和相邻选择器类似，都只会选择其同级的后面元素，只不过兄弟选择器会选择其后面的所有元素。
emsp;emsp; 兄弟选择器用“~”来进行表示。
.fs{color:red;}
.fs~li{color:blue;}
.fs~div{color:green;}
emsp;emsp; 指定选择器通过用nth-of-type()来选择父元素下面的第几个子元素，第一个子元素为1而不是0。
emsp;emsp; n也可以是odd（单数）和even（双数）。
emsp;emsp; 同时我们还可以自己定义规则，如3n，此时是3倍数的子元素会被选中。后面的符号只支持加减。
特殊：nth-last-of-type(n)
emsp;emsp;nth-last-of-type(n)是从后往前进行寻找。方法和nth-of-type()相同。
emsp;emsp;子元素指定选择器使用nth-child(n)来进行表示，第一个元素用1表示，而不是0。
emsp;emsp;原理：根据我们所选元素去寻找它的父级，然后再在这个父级的子元素中寻找我们需要的第几个元素。
当有其他类型元素是我们所选定的数值位置的元素，则不起作用。
emsp;emsp;兄弟用法：nth-last-child。
emsp;emsp;当使用这种方法的时候，只要包含这个属性名的元素都会被选中。
<style>
div[fs]{
color:red;
}
</style>
emsp;emsp;当使用这种方法的时候，必须属性名和属性值完全一致才会被选中。
emsp;emsp;当使用这个方法的时候，只要属性名中包含这个属性值即可被选中。
emsp;emsp;当时使用这种方法的时候，只要属性名中包含的属性值中，该属性值位于第一位，则会被选中。
emsp;emsp;当时使用这种方法的时候，只要属性名中包含的属性值中，该属性值位于最后一位，则会被选中。
emsp;emsp;当使用这种方法的时候，只要属性名中包含的属性值中，包含该属性，哪怕是在其他属性值内，都会被选中，但是如果之间有空格则不行。
emsp;emsp;高亮选择是制作个性化页面中常用的操作，用::selection表示。
emsp;emsp;可以设定四个样式：背景、字体颜色、鼠标选中状态、轮廓属性。
.fs::selection{
background:red;
color:green;
cursor：pointer；
outline:#00FF00 dotted thick;
}
emsp;emsp;该选择器用于删除已经选择到的元素。
使用方法：
emsp;emsp;元素名称:not（属性值，属性值）
注：如果是自定义属性需要使用 [ 属性名=属性值 ]这种方法选择。
div:not(.sky,.busy,[blue='1111]);
emsp;emsp;启禁用选择器用enabled和disabled进行表示，一个元素默认为enabled,当我们对元素设定为disabled的时候，则不能选择。
fs:enabled{ }
fs:disabled{ }
//可以通过这种方式找到对应的元素 只对表单等有作用
emsp;emsp; Query选择器分为唯一选择器和群组选择器。
唯一选择器：
父级.querySelector(‘选择器名称’)
document.querySelector('div[blue='kkk]');
document.querySelector('div').innerHtml='abcd;
群组选择器：
父级.querySelectorAll(’ 选择器名称 ');
document.querySelectorAll('div,input,span')；
document.querySelector('div')[0].innerHtml='abcd;