css怎么选择兄弟元素（Thinking — CSS从根解决选择前一个兄弟元素）

Thinking系列    
    
    ，旨在利用10分钟的时间传达一种可落地的编程思想    
    
    。

开发中遇到这样一个诉求：特定class的元素单独占一行    


     


     


，现需要针对其前一个兄弟元素增加相应标识




 




 




，以使其占据所在行的剩余所有空间    


     


     


。

换句话：就是如何选中特定class的前一个兄弟元素




 




 




。(如何选中下面每个b元素前的a元素)

CSS 不存在选择前一个兄弟元素的选择器！CSS 不存在选择前一个兄弟元素的选择器！

为什么？

流布局

块元素： 按照基于其父元素的书写顺序(默认值： horizontal-tb) 的*块流动方向 (block flow direction)*放置 — 每个块级元素会在上一个元素下面另起一行   

   

   。=> 从上到下

内联元素： 如果父级块级元素的宽度有足够的空间   

   

   ，它们与其他内联元素    
    
    、相邻的文本内容（或者被包裹的）被安排在同一行     

     

     

。如果空间不够     

     

     

，溢出的文本或元素将移到新的一行




  




  




。==> 从左到右

思考

了解了浏览器正常情况下的流布局形式（从左到右




  




  




，从上到下）
  


  


  ，我们就可以得知：CSS 之所以不支持     
     
     
，是由于其流布局导致
  


  


  。

如果可以通过当前元素选择前一个兄弟元素 




   




   




，可能会导致额外的重绘操作！

CSS NEXT

:has( <forgiving-relative-selector-list> )

:has() 表示一个元素

 



 



 ，如果作为参数传递的任何相对选择器在锚定到该元素时               ，至少匹配一个元素     
     
     
。这个伪类通过把可容错相对选择器列表作为参数  




    




    




，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法 




   




   




。

相关规范：https://www.w3.org/TR/selectors-4/#relational

MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has

实现上述诉求：

.a:has(+ .b) { background-color: blue; }

其目前浏览器支持程度不是特别理想（Firefox也不支持）

解决方案

无法选择前一个兄弟元素












，是有流布局导致               ，我们是否可以改变布局方式   



     



     



，来解决呢？

通过 flex 的属性flex-direction: row-reverse; 来反转













，这样问题就变为了：如何选择特定class的后一个兄弟元素？

div { display: flex; flex-direction: row-reverse; justify-content: flex-end; } li { display: inline-block; width: 30px; height: 30px; margin-right: 10px; background-color: gainsboro; } .b+.a { background-color: blue; }

需要注意的是    
    
    ，此时 DOM 顺序需要反转

 



 



 。

<div> <li class="b">b</li> <li class="a">a</li> <li class="b">b</li> <li class="a">a</li> <li class="a">a</li> <li class="b">b</li> <li class="a">a</li> <li class="a">a</li> <li class="a">a</li> <li class="a">a</li> </div>

以上就可以实现了！

总结

“既然没有选择前一个兄弟元素的选择器    
    
    ”    


     


     


，那就布局反向（从右向左）




 




 




，这样问题就变为了    


     


     


”如何选择后一个兄弟元素“               。

解决这个问题的方式并不难   

   

   ，但思路值得延伸  




    




    




。