CSS选择器神器：除了第一个元素外全变红

使用选择器:not()和:first-child

学习CSS时可能遇到给全部子元素加上样式，但有个孤零零的除外。不用担心，你只需要用到两个好帮手—— prompt()和 tagging(). prompt()负责找出那个特殊元素；而 tagging()则把注意力放在父元素的第一个子元素上。

比如你想要除了第一个元素外都变成红色的话，那你可以这样设置CSS:

css
.parent :not(:first-child){

    background-color: red;
}

这段代码让你选中“parent”类（也就是爸爸级别的元素啦）的所有子元素，其中排在第1位的除外。它们中的背后就会变成红彤彤的颜色呦！

这种方法很实用，好多时候都用得上，直接省去了去掉开头字母样式的烦恼

使用:nth-of-type()

	
		
		
			.dom div {
				float: left;
				height: 150px;
				line-height: 150px;
				width: 150px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			.dom  div:not(:first-child){
			
			    background:red;
			
			}
		
	
	
		

			
1
			
2
			
3
		
	

告诉你能去掉老大的那玩意儿叫啥子？就是那个”nth-of-type()”，知道不？这货活儿干得好，不管你是找哪个赛马场里头的小孩子们也不用怕。有了它，你直接就可以上色

这就跟剪头发似的，你也不需要一个个地去找，直接跳到第三个乃至更多呗。对？这样做就是：

第二个或更多的父级div，可以这样修改~

color: blue;

这代码就是帮你搞定class=’parent’下面除最前面那个div外，所有div里面的字全变成蓝色！

使用’nth-of-type()选择器’就能轻松删掉那些烦人的子元素了~真是省心又简单呀~

使用:nth-child()

.dom div:nth-of-type(n+2){
background:pink;
}

其实，nth-of-type()跟:nth-child()这俩差不多，但也有些小差别。比如，要是用:nth-child(),那你就完全不用理前面那个老大，只管挑剩下的那帮小弟就行。而且，这个功能超级好用的，无论你要挑哪种类型的孩子，只需数到第N个，就能轻松选中！

想要勾出父亲元素之后所有第二个孩子后面的内容？那就这样做：

.parent div:nth-child(n+2){

font-weight: bold;

这段代码就是把爷爷辈的所有孙子都找出来，但这个子div就不算。接下来，所有这些孙子都会变得更大一点的！

nth-child这个选取器太牛了！我们就能自由地设置不想要的样式，简直是神器！

.dom div:nth-of-type(2n+1){
background:pink;
}
.dom div:nth-of-type(2n+2){
background:green;
}

使用兄弟选择符+或者~

用”+”和”~”轻松搞定，就能把老大忽略掉，接着给其他崽儿们画出好看的形状，是不是超级简便啊?这俩家伙可是离得紧紧的哦～

比如，如果想你后几个div跟前面的不一样的话，那就用下这个CSS：

.parent div + div {

border: 1px solid black;

其实这就像是在找”父亲” class名叫 parent的家伙（别看错了，是那不亮眼的父辈div哦），然后很快利落地给旁边的兄弟们全都加个黑框儿！

记住，如果想要选”兄弟”节点或附近的节点，就尝试使用波浪线这个符号！

.parent div ~ div {

.dom div:nth-child(n+2){
background:green;
}

margin-top: 10px;

嘞个小程序就是要找出名称为‘parent’的父级元素(要从第二个’div’开始哟)还有她们下面的子子孙孙们，然后在每个人脑门上画一道10像素的大红线唷!

只要用那啥兄弟选择符搞定加号和波浪号这俩属性，就能随心所欲地给想变脸的兄弟节点换造型咯。这样咱们写CSS会变得更加轻松自如，节省时间又快人一步哟～

做网页设计，这四招都可以用的，就是看你要什么样的效果，选哪个好了。

快来瞧瞧咱们是怎么用CSS搞定剩下的部分！看过这篇教程，你就会简单很多了，累赘的事情交给css即可！