相信看官们一定觉得常规的选择器很麻烦不是吗，哼>.<,今天我要放大招了
1.选择器1~选择器2（选择选择器1之后的同一层的选择器2的元素）
_ 首先先贴上测试代码_
<div>
<p>1</p>
<p id="p2">2</p>
<p>3</p>
<p>4</p>
</div>
<div>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</div>
#p2~p{
color: red;
}
好，我们首先看看这个选择器到底有没有用，如果概念没搞错的话，那么应该上一层的h2也就是内容为3和4的块是红色的，而下一层不变色，来看看结果。
很棒！能够看到只有3和4变成了红色，其他内容不变色，能够简单地发现~选择器只能影响同一层的元素。
同时，也能够很清晰地观察到，只有第一个div里面的id为p2的p标签之后的p标签受到了影响。
2.选择器1+选择器2（选择选择器1以后下一个同层选择器2的标签）
同样的，我们使用上一个用例所用的html代码，不同的是把css选择器改为+选择器，让我们来看看效果吧！
#p2+p{
color: red;
}
能够看到不同于~选择器，+只选择了id为p2的p标签后面的一个p标签，且不包含p2。
熟悉css的小伙伴们能够想到，css选择器是能够根据html元素的属性值进行选择的，那么css3中新增了哪些属性选择器呢？
1.[属性名^=属性值开头] （选择开头包含某个字段属性值的元素）
话不多说，先上代码，现在还是用和上面例子差不多的代码。
<div>
<p id="paragraph1">1</p>
<p id="para2">2</p>
<p id="paragraph3">3</p>
<p id="para4">4</p>
</div>
[id^=para]{
color: red;
}
可以看到，我们选择了属性为id的中所有开头为para的元素。
不出所料，所有的元素都被选中了，因为不论是paragraph还是para，它的前几位都是para。
现在我们再调整一下css。
[id^=parag]{
color: red;
}
我们现在选中属性为id的开头为parag的元素，这一点只有1和3，则id前缀为paragraph的元素符合。
2.[属性名$=属性值结尾] （选择结尾包含某个字段属性值的元素）
好，我们还是使用上一个例子中的html代码，只把它的id值做一丁点的改变：
<div>
<p id="paragraph1">1</p>
<p id="para1">2</p>
<p id="paragraph2">3</p>
<p id="para2">4</p>
</div>
css如下：
[id$='1']{
color: red;
}
css代码可见我们选中了所有末尾为1的id值，则1，2都应该变成红色
值得一说的是，末尾选择器必须选择从属性值结尾字符到中间任一字符的值，值越多逻辑而言选择范围越小，但不能不包括末尾的字符，否则是没办法选中元素的，比如如果上述代码选择[id$=paragraph]，它也是无法选中的，因为元素的id总带着一个数字。
3.[属性名=属性值连续字段] （选择属性值包含某个字符段的元素）*
如上述html代码，我们用包含选择器选择paragraph，就能够很轻易地选中了。
[id*=paragraph]{
color: red;
}
同时css3中新增了许多伪类选择器，它们用‘：’或‘：：’区分，在某些情况下，可以使你更方便地构造代码。
1.：last_child{} (选择最后一个子元素)
该选择器将选中指定元素下最后一个子元素，：前填的是你需要选择的元素。
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
如以上代码，你需要选择最后一个li，不需要再给4标签加一个id了，你只需要：
li:last-child{
color: red;
}
就可以选择它！
当然，这种方法要慎用，因为一不小心，你的代码就会变成这个样子...
<ul>
<li class="ul1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<ul>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
（css代码还是跟上面一样）
所以看官们最好养成一种好习惯，嗯，就是用新选择器的时候给它套一层父子选择器
嗯...像这样：
.ul1 li:last-child{
color: red;
}
鬼知道我因为没用父子选择器掉了多少头发555。
用了以后，它就变成了梦想中的样子：
2. :first-child{} （选择第一个子元素）
果然，有开始才有结束，在哪都逃不掉哼！！！所以失恋的看官们不要站在楼顶发呆啦，有过一段刻骨铭心的回忆，比起地久天长也是另一番的情趣不是嘛。
first-child的用法和last-child简直一模一样好吗！！果然是一个妈生的。想一想，你记住一个选择器就会用两个，是不是感觉赚到了呢。
好！我们啥都不变，就把last改成first看看：
.ul1 li:first-child{
color: red;
}
Bingo！！！我太懒了，少打一片字，是不是意味着我可以多摸两分钟🐟了呢？
3. :nth-child(n){} （选择第n个同层子元素）
nth-child的作用是选择同层下第n个为目标元素的元素。如选择ul里第几个li。需要注意的是，如果第n个元素不是目标元素，那它将不会被选中，这一点与nth-of-type（）选择器恰恰不同。这里的n是从1开始的，也就是说，n为1时选中第一个元素为×的元素。其他用法与first-child相同。
<div>
<p>1</p>
<h2>2</h2>
<p>3</p>
<h2>4</h2>
<p>5</p>
<h2>6</h2>
</div>
p:nth-child(3){
color: red;
}
由上面代码，我们写了3的p标签被选中了
但如果我们把css样式改成这样：
p:nth-child(2){
color: red;
}
它是无法被选中的，因为第二个元素是h2标签，而不是p标签
还有，如果不是特殊需要的话，无脑加父类就完事儿了^-^
另外nth-child（）还可以加上算数表达式，我们可以这样玩
<ul>
/*九九八十一个li*/
<li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul>
*{
margin: 0;
padding: 0;
}
ul{
width: 900px;
height: 900px;
}
li{
list-style: none;
width: 100px;
height: 100px;
float: left;
}
li:nth-child(2n){
background: black;
}
我们将81个li排列成9*9的九宫格，之后选中值为2n（双数）的li，填充成黑色
答应我，下次五子棋别再用纸了好吗！
4.：nth-of-type(n){}
介个跟nth-child用法一样的啦，不一样的就是它的计数方式是在目标元素中计数，而不存在选不中的问题，就拿上面那个错误示范来举栗子。
<div>
<p>1</p>
<h2>2</h2>
<p>3</p>
<h2>4</h2>
<p>5</p>
<h2>6</h2>
</div>
p:nth-of-type(2){
color: red;
}
A ! M ! A ! Z ! I ! N ! G ! 它选中了3！！
5.：only-child{}
选中父元素下只有一个元素且该元素是目标元素的元素。
是不是感觉很绕？概念这玩意从小到大都伤脑筋，其实吧，只要看看代码就懂了，多大个事儿
<div>
<p>0</p>
</div>
<div>
<p>1</p>
<p>2</p>
</div>
<div>
<p>3</p>
<h3>4</h3>
</div>
p:only-child{
color: red;
}
可以看到，我在html代码里构建了三种可能，
_ 第一种，有且只有一个p元素。_
_ 第二种，有且只有p元素，但p元素不止1个。_
_ 第三种，只有一个p元素，但除此之外还有一个h3元素。_
哼，有没有被我机智到。我们来看看结果：
只有0被选中了，说明当目标元素父元素有且只有一个目标元素时，目标元素才能被选中。
6.：only-of-type{}
看见这个of-type，有没有觉得似曾相识？相信你猜的没错，这个标签和only-child的区别也是按类型来的，我们拿上述代码再测试一下，把css改成：
p:only-of-type{
color: red;
}
我们来看看结果
0和3都被选中了，说明只要父元素下只存在一个目标元素，不管其他元素还有多少，都会被选中。
7.：checked （选中选中的元素）
是的，你没看错，我也没打错，它的作用就是选中选中的元素。
<input type="checkbox" checked>huhu
<input type="checkbox" disabled>huhu
<input type="checkbox">huhu
input:checked{
width: 50px;
height: 50px;
}
可以看到选中的元素所占范围扩大了
8.：disabled（选中不可用的）
还是用上面的代码改一下css
input:disabled{
width: 50px;
height: 50px;
}
不可用的部分所占空间扩大了。
9.：enable（选中可用的元素）
用法和disabled是完全一样的，而作用则完全相反，选择所有可用的元素（包括选中和未选中）
10.选择器1：not（选择器2） （交集选择器）
这个选择器是真好用！！！好用！！用......
你是否还在为列表中只有一个样式不选中而苦恼，今天，不要998，不要128，not选择器带回家！！！
not可以选择不包含选择器2的选择器1
<ul>
<li>1</li>
<li id="l2">2</li>
<li>3</li>
<li>4</li>
</ul>
li:not(#l2){
color: red;
}
通过上面的代码，我们就可以选择除了l2的所有li标签
