web前端入门到实战:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。
湟中ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!
相邻兄弟选择器(+)
相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
器。
相邻兄弟选择器
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
Hello word!
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
效果图如下:
兄弟只会影响下面的p标签的样式,不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h2标签的样式。
当然这个也会循环查找,即当两个兄弟元素相同时,会再一次循环查找:
示例:
- List item 1
- List item 2
- List item 3
可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。
兄弟选择器(~)
作用是查找某一个指定元素的后面的所有兄弟结点。
示例代码:
1
2
3
4
5
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
效果展示:
后代选择器(包含选择器)
可以选择某元素后代的元素(子子孙孙元素)
子选择器(>)
只能选择作为某元素儿子元素的元素,不包括孙元素、曾孙元素等等等。
后代选择器,子选择器和相邻兄弟选择器结合使用示例:
请看下面这个选择器:
html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
:first-child 选择器
li:first-child
{
background:yellow;
}
- 咖啡
- 茶
- 可口可乐
- 咖啡
- 茶
- 可口可乐
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
效果图
值得注意的是,如果其父元素的第一个元素(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;
}
这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。
注释:Internet Explorer 不支持 :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的标签(<=3)
nth-last-child(3) 表示选择列表中的倒数第3个标签
:nth-of-type(n)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
p:nth-of-type(2)
{
background:#ff0000;
}
这是标题
第一个段落。
测试
第二个段落。
第三个段落。
第四个段落。
第五个段落。
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
效果图:
:nth-last-child() 选择器
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。
CSS3 :not 选择器
:not(selector) 选择器匹配非指定元素/选择器的每个元素。
扩展
菜单栏右边框的实现方法有多种,结合上面介绍的选择器,实现方法分别如下:
一、常规方法:
.nav li{
border-right:1px solid #fff;
}
.nav li:last-child{
border-right-width:0px;
}
二:结合相邻兄弟选择器(+)
.nav li + li{
border-left:1px solid #fff;
}
三、结合兄弟选择器(~)
.nav li:first-child ~ li{
border-left:1px solid #fff;
}
四、结合:not()选择器
.nav li:not(:last-child){
border-right:1px solid #fff;
}
当前题目:web前端入门到实战:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)等用法
本文网址:http://myzitong.com/article/jdgjhs.html