Thinking -- CSS从根解决选择前一个兄弟元素_css选择上一个兄弟-程序员宅基地

技术标签： css 选择前一个兄弟元素 css选择器 Thinking 前端 prev sibling

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>

以上就可以实现了！

总结

“既然没有选择前一个兄弟元素的选择器”，那就布局反向（从右向左），这样问题就变为了”如何选择后一个兄弟元素“。

解决这个问题的方式并不难，但思路值得延伸。

本文链接：https://blog.csdn.net/ligang2585116/article/details/129694125

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

240320俄罗斯方块java,JAVA游戏编程之三----j2me 手机游戏入门开发--俄罗斯方块_2-程序员宅基地

文章浏览阅读202次。packagecode;//importjava.awt.*;//importjava.awt.Canvas;//importjava.awt.event.*;//importjavax.swing.*;importjava.util.Random;importjavax.microedition.lcdui.*;//写界面所需要的包/***//***俄罗斯方块*高雷*2007年1..._240×320java游戏

在线电影院售票平台(源码+开题报告)-程序员宅基地

文章浏览阅读779次，点赞14次，收藏19次。然后，实现系统的数据管理和服务功能，包括用户的注册与登录、电影的分类与展示、电影信息的查询与推荐、座位的选择与预订、在线支付与电子票生成等。此外，随着在线视频平台的兴起，越来越多的人选择在线观看电影，这对传统电影院产生了巨大的冲击。研究意义：开发在线电影院售票平台对于提升用户的观影体验、优化电影院的运营效率、促进电影产业的发展具有重要的意义。该系统旨在通过技术手段解决传统电影院售票中的问题，提供一个集成化的电影信息展示、座位选择、在线支付和用户评价平台，同时也为电影院和电影制作方提供有效的工具。

程序员熬夜写代码，用C/C++打造一个安全的即时聊天系统！_基于c++的即时聊天系统设计-程序员宅基地

文章浏览阅读509次。保护我们剩下的人的通话信息安全，使用TOX可以让你在和家人，朋友，爱人交流时保护你的隐私不受政府无孔不入的的偷窥.关于TOX：其他牛逼的软件因为一些细化服务问你要钱的时候， TOX分文不取 . 你用了TOX，想干嘛就干嘛.网友评论：项目源码展示：源码测试效果：最后，如果你学C/C++编程有什么不懂的，可以来问问我哦，或许我能够..._基于c++的即时聊天系统设计

linux Java服务swap分区被占用内存泄露问题故障及解决方法_linux swap占用很高-程序员宅基地

文章浏览阅读584次。鱼弦：CSDN内容合伙人、CSDN新星导师、全栈领域创作新星创作者、51CTO(Top红人+专家博主) 、github开源爱好者（go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen）当Java服务在Linux系统中运行时，可能会出现swap分区被占用的内存泄露问题，导致系统性能下降或者崩溃。下面是该问题的故障及解决方法、底层结构、架构图、工作原理、使用场景详解和实际应用方式、原理详细描述、相关命令使用示例以及文献材料链接。_linux swap占用很高

word中利用宏替换标点标点全角与半角-程序员宅基地

文章浏览阅读662次。Alt+F11，然后插入-模块：复制下面代码到编辑窗口：Sub 半角标点符号转换为全角标点符号()'中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragraph, ChineseInterpunction() As Variant, EnglishInterpunction() As Variant Dim MyRange..._替换半角宏

Android WebView使用总结_android webview真正加载完成-程序员宅基地

文章浏览阅读2.8k次。#.简介： WebView是Android提供的用来展示展示web页面的View，内部使用webkit浏览器引擎（一个轻量级的浏览器引擎），除了展示Web页面外，还可与Web页面内的JS脚本交互调用。WebView内部的WebSetting对象负责管理WebView的参数配置； WebViewClient负责处理WebView的各种请求和通知事件，在对应事件发生时会执行WebViewClient的对应回调； ChromeWebviewClient辅助Webview处理与JS一些交互......_android webview真正加载完成

随便推点

bitcoin 调试环境搭建-程序员宅基地

文章浏览阅读1.6k次。_bitcoin 调试环境搭建

曲线生成 | 图解B样条曲线生成原理(基本概念与节点生成算法)-程序员宅基地

文章浏览阅读4.3k次，点赞93次，收藏94次。为了解决贝塞尔曲线无法局部修正、控制性减弱、曲线次数过高、不易拼接的缺陷，引入B样条曲线(B-Spline)。本文介绍B样条曲线的基本概念：节点向量、支撑性、次数阶数、加权性质、节点生成算法等，为后续曲线计算打下基础。_样条曲线生成

CDH安装宝典之ClouderaManager_/opt/cloudera/cm-agent/service/mgmt/mgmt.sh: line -程序员宅基地

文章浏览阅读902次。配置本地repo库下载我的阿里云盘文件文件放置#创建目录mkdir -p /opt/cloudera/parcel-repo/mkdir -p /opt/cloudera/cm/yum install createrepoCDH 6.2.0 的三个文件放到/opt/cloudera/parcel-repo/中，并且注意把sha256后缀的文件名修改为sha#执行createrepo命令生成rpm元数据最终/opt/cloudera/parcel-repo/会多一个repodata目录_/opt/cloudera/cm-agent/service/mgmt/mgmt.sh: line 76: /usr/java/jdk1.8.0_181