css选择器，如何理解+兄弟选择器？*+*选择的是什么节点？

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

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

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔的代码所学所想。本文描述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>

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

*+*

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

值得一提的是：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>

> :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>

如果改成> :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>

加号选择器

“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>

值得注意的是：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>

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

>子代选择器

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

<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>

相关链接

• https://newsn.net/say/css-selector.html
• https://newsn.net/say/css-first-line.html
• https://newsn.net/say/css-marker.html

总结

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

• https://newsn.net/tag/css/

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