相邻兄弟选择器(+)
定义:相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
html代码:
这里是第一个p标签
这里是第二个p标签
标题H2
这里是第三个p标签
这里是第四个p标签
这里是第五个p标签
css样式:h2+p {color: red; }结果:
复制代码
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
li + li {color:red;}结果:
复制代码
分析: 一开始特别纳闷为啥“List item 2”和“List item 3”都被选中了~~~
首先分析选择器样式:li+li{},字面意思是选取所有位于li标签后的第一个li元素
很显然第一个li不会被选中,因为它前面不是li
第二个li会被选中,因为它是第一个li标签紧邻的li标签
第三个li也会被选中,因为第三个li标签的上一个标签也是li标签,也满足li+li{}的条件:li标签后的第一个li标签
正因为css选择器的样式为li+li{},所以代码中的li标签就可以一直套用这个“公式”。
兄弟选择器(~),又称匹配选择器
定义:作用是查找某一个指定元素的后面的所有兄弟结点
结果:
通过这两个例子,可以发现虽然这两个选择器都表示兄弟选择器,但是‘+’选择器则表示某元素后相邻的兄弟元素,也就是紧挨着的,是单个的(特殊情况:循环多个)。而‘~’选择器则表示某元素后所有同级的指定元素,强调所有的。
子选择器(>)
定义:只能选择作为某元素儿子元素的元素(直接子元素)
实现效果:
:first-child
定义:用于选取属于其父元素的首个子元素的指定选择器
嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解:
误解一:认为E:first-child选中E元素的第一个子元素。
误解二:认为E:first-child选中E元素的父元素的第一个E元素。
正确的理解应该是:只要E元素是它的父级的第一个子元素,就选中。它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”。
span:first-child{color: red;}
p:first-child{color: blue;} /*p元素的父元素的第一个子元素是div而不是p元素,因此该样式不起作用*/
i:first-child{color: orange;}
第一个span第一个段落P第二个span
一个链接第一个i元素
一个链接第二个i元素
一个链接
复制代码
效果:
:nth-child(n)
定义:该选择器选取父元素的第 N 个子元素(还需要是该类型的元素)
菜鸟教程(runoob.com)p:nth-child(2)
{
background:#ff0000;
}
这是一个标题
这是第一个段落。
这是第二个段落。
这是第三个段落。
这是第四个段落。
注意: Internet Explorer 8 以及更早版本的浏览器不支持 :nth-child()选择器.
复制代码
效果:
:nth-child(n)的详细用法:
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)
定义:选择器匹配属于父元素的特定类型的第 N 个该类型的元素
p:nth-of-type(2)
{
background:#ff0000;
}
这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。
第五个段落。
复制代码
效果: