相邻兄弟选择器子选择器兄弟选择器等用法.docx
《相邻兄弟选择器子选择器兄弟选择器等用法.docx》由会员分享，可在线阅读，更多相关《相邻兄弟选择器子选择器兄弟选择器等用法.docx（9页珍藏版）》请在冰豆网上搜索。
相邻兄弟选择器子选择器兄弟选择器等用法
相邻兄弟选择器、子选择器、兄弟选择器等用法
前言：
我们在码代码的时候，常常会碰到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特别的是选取第几个元素添加或删除样式，下面记录css挑选器中频繁的挑选器：
相邻兄弟挑选器（+）、子挑选器（>）、兄弟挑选器（——）、first-child、：
last-child、：
nth-child（）、：
nth-last-child（）的使用。
相邻兄弟挑选器（+）
相邻兄弟挑选器可挑选紧接在另一个元素后的元素，且二者具有相同的父亲元素。
注释：
与子结合符一样，相邻兄弟结合符旁边可以有空白符。
器。
在学习上有什么疑问随时可以找我我，与大家共享互联网web前端实战操作，无论你是否有基础，我都欢迎。
点：
前端技术共享
相邻兄弟挑选器
h1+p{
color:
red;
}
Helloword!
Helloword!
Helloword!
Helloword!
Helloword!
Helloword!
Helloword!
效果图如下：
兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
注重这里的’+’的意义跟’and’意义不一样，兄弟挑选器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
固然这个也会循环查找，即当两个兄弟元素相同时，会再一次循环查找：
示例：
li+li{
color:
red;
}
Listitem1
Listitem2
Listitem3
可以看出第一个li字体色彩没有变红，其次个和第三个元素字体变红，这就是由于第三个li是其次个li的兄弟元素，所以也会应用样式。
兄弟挑选器（——）
作用是查找某一个指定元素的后面的全部兄弟结点。
示例代码：
h1——p{
color:
red;
}
1
2
3
4
5
效果展示：
后代挑选器（包含挑选器）
可以挑选某元素后代的元素（子子孙孙元素）
子挑选器（>）
只能挑选作为某元素儿子元素的元素，不包括孙元素、曾孙元素等等等。
后代挑选器，子挑选器和相邻兄弟挑选器结合用法示例：
请看下面这个挑选器：
html>bodytable+ul{margin-top:
20px;}
这个挑选器说明为：
挑选紧接在table元素后浮现的第一个相邻兄弟ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。
：
first-child挑选器
li:
first-child
{
background:
yellow;
}
咖啡
茶
可口可乐
咖啡
茶
可口可乐
效果图
值得注重的是，假如其父元素的第一个元素（p）不是该指定类型元素（li），则第一个元素不会有样式
li:
first-child
{
background:
yellow;
}
测试
咖啡
茶
可口可乐
效果图
：
last-child挑选器
：
last-child挑选器匹配属于其父元素的最后一个子元素的每个元素。
提醒：
p:
last-child等同于p:
nth-last-child
（1）。
eg：
指定属于其父元素的最后一个子元素的p元素的背景色：
p:
last-child
{
background:
ff0000;
}
这是标题
第一个段落。
其次个段落。
第三个段落。
第四个段落。
第五个段落。
效果：
解释：
p标签的父元素是body，body标签中最后一个p元素是第五个段落
：
nth-child（）
：
nth-child（）挑选器，该挑选器选取父元素的第N个子元素，与类型无关。
p:
nth-child
（2）
{
background:
ff0000;
}
这是标题
第一个段落。
其次个段落。
第三个段落。
第四个段落。
注释：
InternetExplorer不支持:
nth-child（）挑选器。
：
nth-child（）的具体使用
nth-child（3）表示挑选列表中的第三个元素。
nth-child（2n）表示列表中的偶数标签，即挑选第2、第4、第6标签
nth-child（2n-1）表示挑选列表中的奇数标签，即挑选第1、第3、第5、第7标签
nth-child（n+3）表示挑选列表中的标签从第3个开头到最后（>=3）
nth-child（-n+3）表示挑选列表中的标签从0到3，即小于3的标签（
这是标题
第一个段落。
测试
其次个段落。
第三个段落。
第四个段落。
第五个段落。
效果图：
：
nth-last-child（）挑选器
：
nth-last-child（n）挑选器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开头计数。
n可以是数字、关键词或公式。
提醒：
请参阅:
nth-last-of-type（）挑选器，该挑选器选取父元素的第N个指定类型的子元素，从最后一个子元素开头计数。
CSS3:
not挑选器
：
not（selector）挑选器匹配非指定元素/挑选器的每个元素。
扩展
菜单栏右边框的实现办法有多种，结合上面介绍的挑选器，实现办法分离如下：
一、常规办法：
。
navli{
border-right:
1pxsolidfff;
}
。
navli:
last-child{
border-right-width:
0px;
}
二：
结合相邻兄弟挑选器（+）
。
navli+li{
border-left:
1pxsolidfff;
}
三、结合兄弟挑选器（——）
。
navli:
first-child——li{
border-left:
1pxsolidfff;
}
四、结合：
not（）挑选器
。
navli:
not（：
last-child）{
border-right:
1pxsolidfff;
}
升级会员 