快速了解CSS新出的列选择符双管道(||)

2024-01-16 11:32

本文主要是介绍快速了解CSS新出的列选择符双管道(||),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

640?wx_fmt=jpeg

作者 | 张鑫旭

来源 | https://www.zhangxinxu.com/wordpress/2019/02/css-column-combinator/


了解列选择符

示例用法:

col.selected || td {background-color: skyblue;
}

平时我们用过空格,>+~,现在出来个双管道||,是不是没见过,这个双管道||就是本文要介绍的列选择符。

列选择符是规范中刚出现不久的新选择符,目前浏览器的兼容性还不足以实际项目中应用,因此本文仅简单介绍下,让大家知道大致是干什么用的。

在Table布局和Grid布局中都有列的概念,有时候我们希望控制整列的样式。有两种方法,一种是借助:nth-col()或者:nth-last-col()伪类,不过这两个伪类目前浏览器尚未支持;还有一种是借助原生Table布局中的<colgroup><col>元素实现,这个兼容性非常好。

我们通过一个简单例子快速了解下这两个元素,如下表格HTML代码:

<table border="1" width="600"><colgroup><col><col span="2" class="ancestor"><col span="2" class="brother"></colgroup><tr><td> </td><th scope="col">后代选择符</th><th scope="col">子选择符</th><th scope="col">相邻兄弟选择符</th><th scope="col">随后兄弟选择符</th></tr><tr><th scope="row">示例</th><td>.foo .bar {}</td><td>.foo > .bar {}</td><td>.foo + .bar {}</td><td>.foo ~ .bar {}</td></tr>
</table>

可以看出表格共有5列。其中,<colgroup>元素中有3个<col>元素,从span属性值可以看出,这3个<col>元素分别占据1列,2列和2列。此时,我们给后面2个<col>元素设置背景色,就可以看到背景色作用在整列上了,CSS如下:

.ancestor {background-color: dodgerblue;
}
.brother {background-color: skyblue;
}

最终效果如下图:

640?wx_fmt=png

但是,有时候,我们的单元格并不是正好属于某一列,而是跨列,此时,<col>元素是会忽略这些跨列元素的。举个例子:

<table border="1" width="200"><colgroup><col span="2"><col class="selected"></colgroup><tbody><tr><td>A</td><td>B</td><td>C</td></tr><tr><td colspan="2">D</td><td>E</td></tr><tr><td>F</td><td colspan="2">G</td></tr></tbody>
</table>
col.selected {background-color: skyblue;
}

此时仅C和E两个单元格有天蓝色的背景色,G单元格虽然也覆盖了第3列,由于同时也属于第2列,于是被无视了,效果如下图:

640?wx_fmt=png

这就有问题了,很多时候,我们就是要G单元格也有背景色的,只要包含该列,都认为是目标对象。为了应对这种需求,列选择符应运而生了。

列选择符写作双管道||,是两个字符,和JavaScript语言中的逻辑或写法一致,但是,在CSS中却不是“或”的意思,用“属于”解释要更恰当。

通过如下CSS选择器,可以让G单元格也有背景色:

col.selected || td {background-color: skyblue;
}

col.selected || td意思就是选择所有属于col.selected<td>元素,哪怕这个<td>元素横跨多列。

于是,我们可以看到如下图所示的效果:

640?wx_fmt=png

本文内容就这些,结束!

640?wx_fmt=jpeg

640?wx_fmt=jpeg

这篇关于快速了解CSS新出的列选择符双管道(||)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/612447

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro

Redis中管道操作pipeline的实现

《Redis中管道操作pipeline的实现》RedisPipeline是一种优化客户端与服务器通信的技术,通过批量发送和接收命令减少网络往返次数,提高命令执行效率,本文就来介绍一下Redis中管道操... 目录什么是pipeline场景一:我要向Redis新增大批量的数据分批处理事务( MULTI/EXE

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处