快速了解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

相关文章

快速修复一个Panic的Linux内核的技巧

《快速修复一个Panic的Linux内核的技巧》Linux系统中运行了不当的mkinitcpio操作导致内核文件不能正常工作,重启的时候,内核启动中止于Panic状态,该怎么解决这个问题呢?下面我们就... 感谢China编程(www.chinasem.cn)网友 鸢一雨音 的投稿写这篇文章是有原因的。为了配置完

一文详解Java异常处理你都了解哪些知识

《一文详解Java异常处理你都了解哪些知识》:本文主要介绍Java异常处理的相关资料,包括异常的分类、捕获和处理异常的语法、常见的异常类型以及自定义异常的实现,文中通过代码介绍的非常详细,需要的朋... 目录前言一、什么是异常二、异常的分类2.1 受检异常2.2 非受检异常三、异常处理的语法3.1 try-

Redis Pipeline(管道) 详解

《RedisPipeline(管道)详解》Pipeline管道是Redis提供的一种批量执行命令的机制,通过将多个命令一次性发送到服务器并统一接收响应,减少网络往返次数(RTT),显著提升执行效率... 目录Redis Pipeline 详解1. Pipeline 的核心概念2. 工作原理与性能提升3. 核

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行