CSS样式详解之伪类元素及CSS3选择器

一、伪类元素

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两个伪类元素的样式使用基本上是一致的，只不过一个在前一个在后。带伪类元素的样式不是一个真的元素，只是对主元素的一个附属。

二、CSS3选择器

1. 相邻选择器（+）

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;}

2. 兄弟选择器（~）

emsp;emsp; 兄弟选择器使用和相邻选择器类似，都只会选择其同级的后面元素，只不过兄弟选择器会选择其后面的所有元素。
emsp;emsp; 兄弟选择器用“~”来进行表示。

.fs{color:red;}
.fs~li{color:blue;}
.fs~div{color:green;}

3. 指定选择器（nth-of-type(n)）

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()相同。

4. 子元素指定选择器（子元素匹配选择器）

emsp;emsp;子元素指定选择器使用nth-child(n)来进行表示，第一个元素用1表示，而不是0。
emsp;emsp;原理：根据我们所选元素去寻找它的父级，然后再在这个父级的子元素中寻找我们需要的第几个元素。
当有其他类型元素是我们所选定的数值位置的元素，则不起作用。
emsp;emsp;兄弟用法：nth-last-child。

5. 属性选择器

① [ 属性名 ]

emsp;emsp;当使用这种方法的时候，只要包含这个属性名的元素都会被选中。

<style>
div[fs]{
	color:red;
}
</style>

② [ 属性名=属性值 ]

emsp;emsp;当使用这种方法的时候，必须属性名和属性值完全一致才会被选中。

③ [ 属性名~=属性值 ]

emsp;emsp;当使用这个方法的时候，只要属性名中包含这个属性值即可被选中。

④ [ 属性名^=属性值 ]

emsp;emsp;当时使用这种方法的时候，只要属性名中包含的属性值中，该属性值位于第一位，则会被选中。

⑤ [ 属性名$=属性值 ]

emsp;emsp;当时使用这种方法的时候，只要属性名中包含的属性值中，该属性值位于最后一位，则会被选中。

⑥ [ 属性名*=属性值 ]

emsp;emsp;当使用这种方法的时候，只要属性名中包含的属性值中，包含该属性，哪怕是在其他属性值内，都会被选中，但是如果之间有空格则不行。

6.高亮选择（::selection）

emsp;emsp;高亮选择是制作个性化页面中常用的操作，用::selection表示。
emsp;emsp;可以设定四个样式：背景、字体颜色、鼠标选中状态、轮廓属性。

.fs::selection{
	background:red;
	color:green;
	cursor：pointer；
	outline:#00FF00 dotted thick;
}

7. 非内容选择器

emsp;emsp;该选择器用于删除已经选择到的元素。
使用方法：
emsp;emsp;元素名称:not（属性值，属性值）
注：如果是自定义属性需要使用 [ 属性名=属性值 ]这种方法选择。

div:not(.sky,.busy,[blue='1111]);

8. 启禁用选择器(enabled disabled)

emsp;emsp;启禁用选择器用enabled和disabled进行表示，一个元素默认为enabled,当我们对元素设定为disabled的时候，则不能选择。

   fs:enabled{   }
   fs:disabled{   }
   //可以通过这种方式找到对应的元素   只对表单等有作用

9. Query选择器

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;