相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符
例子:
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
li + li {font-weight:bold;}
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
CSS3 兄弟选择符(E~F)
语法: E~F{ sRules }
表示: 选择E元素后面的所有兄弟元素F。
除了IE6不支持, 大部分浏览器都支持。
例子:
p~p{color:#f00;}
上面这个选择器只会把p后面的所有p都用红色标记,而第一个p不影响。
更多推荐
html+css基础入门教程之相邻兄弟选择器
发布评论