我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔在本文中将要描述一个不是很常见的css选择器,可以用于选择某个节点的邻居。其中一个最典型应用就是> *+*选择器,那么,这个奇怪的【星加星】的css写法是什么意思呢?

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - css兄弟节点选择器
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-1)

大家好,这里是苏南大叔的程序如此灵动博客,记录苏南大叔的代码所学所想。本文描述css的“+”兄弟选择器的使用方式,当然在编写css代码的时候,这种用法很少见。本文测试环境:谷歌浏览器@111.0.5563.111

> *+*

例子如下:

<div id="test">
  <div class="s">1
    <div class="s">1.1</div>
  </div>
  <div class="s">2
    <div class="s">2.1</div>
  </div>
  <div class="s">3</div>
</div>
<style>
  .s{
    background: blue;
  }
  div#test > * + * {
    background: red;
    margin-bottom: 1px;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 截图一
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-2)

从例子的效果截图上可以看到,> *+*的效果是:直接子代中除了第一个子代之外的其它子代,就是父节点的非长子的子节点,或者说长子节点的兄弟节点。

*+*

如果直接就是*+*的话,就是单位区块内除了第一个节点外的其它节点(不一定和第一个节点同类型,只要同级即可)。

值得一提的是:body作为和head同级的第二个元素节点,也是在*+*的控制范围内的。
<div>
  A
  <div>
    1
    <div>1.1</div>
    <div>1.2</div>
  </div>
  <div>
    2
    <div>2.1</div>
    <p>2.2</p>
  </div>
  <div>
    3
    <div>3.1</div>
    <p>3.2</p>
    <p>3.3</p>
    <div>3.4</div>
    <div>3.5</div>
  </div>
</div>
<div>B</div>
<style>
  div,
  p {
    background: blue;
    margin: 0px;
    padding: 0px;
    margin-left: 10px;
  }
  * + * {
    background: red !important;
    margin-bottom: 1px;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 星加星
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-3)

> :not(:first-child)

> :not(:first-child)这是> *+*的另外一个说法,效果上是一致的。参考例子:

<div id="test2">
  <div class="s">1
    <div class="s">1.1</div>
  </div>
  <div class="s">2
    <div class="s">2.1</div>
  </div>
  <div class="s">3</div>
</div>
<style>
  .s{
    background: blue;
  }
  div#test2 > :not(:first-child) {
    background: red;
    margin-bottom: 1px;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 截图二
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-4)

如果改成> :not(:last-child),选择的就是除了最小的儿子之外的其余子节点。参考例子:

<div id="test2">
  <div class="s">1
    <div class="s">1.1</div>
  </div>
  <div class="s">2
    <div class="s">2.1</div>
  </div>
  <div class="s">3</div>
</div>
<style>
  .s{
    background: blue;
  }
  div#test2 > :not(:last-child) {
    background: red;
    margin-bottom: 1px;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 截图三
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-5)

加号选择器

“A + B”选择器选择的是:A节点的同级旁边紧挨着的B节点。也就是说,> *+*中,>决定的是子代,+决定的是兄弟节点。参考例子:

<p class="p">-3</p>
<p class="p">-2</p>
<p class="p">-1</p>
<h2>0</h2>
<p class="p">1</p>
<p class="p">2</p>
<p class="p">3</p>
<style>
  p + p {
    background: pink;
  }
  h2 + p {
    color:red;
    font-weight: bold;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 截图四
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-6)

值得注意的是:p+p选择的是非第一个之外的一系列p,而h2+p选择到的仅仅是紧挨着h2的第一个p。所以,苏南大叔认为,这个A+B可能描述的是一个循环,大家自己想象一下。

另外一个例子:

<p class="p">-3</p>
<p class="p">-2</p>
<p class="p">-1</p>
<h2>0</h2>
<p class="p">1</p>
<p class="p">2</p>
<p class="p">3</p>
<style>
  .p + p {
    color:red;
    font-weight: bold;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 截图五
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-7)

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<style>
  li + li {
    font-weight: bold;
    color: red;
  }
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 截图六
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-8)

选择器写法选择的节点
> *+*非长子节点的其它节点
*+*所有节点
A+B紧挨着A的B单一节点("?"),也可能是多个B节点。要用循环的眼光看待这个表达式A+B

>子代选择器

这个右箭头是选择直系子代的,只管儿子不管孙子。

<div id="test">
    <div class="s">1
        <div class="s">1.1</div>
    </div>
    <div class="s">2
        <div class="s">2.1</div>
    </div>
</div>

<style>
#test .s{
    background: red;
    margin-bottom: 1px;
}
#test>.s{
    background: blue;
    margin-bottom: 1px;
}
</style>

苏南大叔:css选择器,如何理解+兄弟选择器?*+*选择的是什么节点? - 子代选择器
css选择器,如何理解+兄弟选择器?*+*选择的是什么节点?(图9-9)

相关链接

总结

本文中主要描述的是css选择器中的一个比较罕见的写法> *+*,选择的是第一个子节点之外的其它子节点。其中>表示了为直接子节点,+表示了除了操作符左侧之外的符合右侧特征的所有兄弟节点。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css