CSS相邻兄弟选择器的直白解释

本文最后修改于 159 天前,部分内容可能已经过时!

最近在复习前端的内容,感觉忘得七七八八了,所以只好把一些复习内容也给备份一下,也希望能够帮助到有需要的小伙伴们。
然后就遇到个CSS相邻兄弟选择器,感觉以前也不是特别深刻理解,所以导致一看到这选择器,就这是啥,我是怎么学的前端,这说的啥。
根据w3school的解释呢,

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:h1 + p {margin-top:50px;}

例子:

h1 + p {font-weight:700;}

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

这里的效果就是,这里有一个<h1>标签和很多个<p>标签,而我只想要在第一个段落加粗,则可以使用兄弟选择器,因为兄弟选择器选择的是+号后面的元素,你也可以直接选择给第一个段落标签添加一个class选择器或ID选择器,或者在这里面添加一个p:frist-child也可以实现同样效果。

另外戏剧性的是,如果是<li>+<li>(相同的两个标签)那么会从第二个li开始,循环式的给后面的兄弟元素增加属性值。

如这样子:
li + li {font-weight:700;}

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

如果对你有所帮助,欢迎投食打赏博主,支持云闪付微信支付宝QQ~ 感谢您的支持,耶

Tags:CSS选择器前端
上一篇
打赏
下一篇

添加新评论