CSS 原生嵌套语法兼容性问题

目录

  • 1.介绍
  • 2.兼容性问题

1.介绍

所谓的嵌套,就是将一个 CSS 规则放在另一个(嵌套规则)中,子规则的选择器将相对于父规则的选择器。这有利于代码的模块化和可维护性。原来只能在 CSS 预处理器Less、Sass中使用的嵌套功能,先在可以在原生 CSS 中使用。

元素是通过.nav__item设置样式。要使CSS有效,使用&符号是可选的。

nav__item {& a {display: block;padding: 1.5rem 1rem;}
}/* 等同于 */
.nav__item a {
}

您也可以选择不使用&符号:

.nav__item {a {display: block;padding: 1.5rem 1rem;}
}/* 等同于 */
.nav__item a {
}

请注意这是一个最近的更新,被称为宽松的CSS嵌套。它适用于最新的Chrome Canary和Safari技术预览版。

2.兼容性问题

Chrome 109 发布;Safari 技术预览版 162 发布,这两个浏览器版本都带来了 CSS 嵌套的实验性支持。Chrome 浏览器于 112 版本正式推出 CSS 原生嵌套功能。Chrome 官方指出,添加将 CSS 样式规则嵌套在其他样式规则中的功能,将来自外部的选择器与内部规则相结合,以提高样式表的模块化和可维护性。

所以在使用原生css嵌套语法的时候一定要考虑浏览器的版本兼容性,推荐还是使用预处理器Less、Sass中使用的嵌套功能
或用原生非嵌套写法

.nav__item a {color: ‘#ffffff’
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Map进行自定义排序

在Java中,Map 接口本身并不提供自定义排序的功能。Map 接口的实现类 HashMap、LinkedHashMap 和 TreeMap 提供了不同的排序特性: HashMap:不保证元素的顺序,元素的插入顺序可能会在遍历时被随机打乱。LinkedHashMap:类…

微信开发者工具报错 Error: module ‘xxx.js‘ is not defined, require args is ‘xxx.js‘

背景 报错如下 检查 代码逻辑和写法都是ok的重新打开项目又是可以的 解决方案 先确保微信开发者工具和uniapp的将js编译成es5都开着(这个是默认开的) 然后把微信开发者工具关了重开 一般做这一步就会好了,但是只是临时解决 &#xff08…

《Winodws API每日一练》8.2 static控件

在 Windows 编程中,"Static" 控件是一种常见的用户界面元素,用于显示静态文本或图像,而无法进行用户交互。它通常用于显示标签、标题、说明文本或静态图像等信息。Static 控件是一种静态的、只读的显示元素,不接受用户的…

秒懂设计模式--学习笔记(6)【创建篇-建造者模式】

目录 5、建造者模式5.1 介绍5.2 建造步骤的重要性5.3 地产开发商的困惑5.4 建筑施工方5.5 工程总监5.6 项目实施5.7 建造者模式的各角色定义5.8 建造者模式 5、建造者模式 5.1 介绍 建造者模式(Builder)又称为生成器模式,主要用于对复杂对象…

Pip的缓存机制解析:提升Python包管理效率的秘密武器

Pip的缓存机制解析:提升Python包管理效率的秘密武器 Pip是Python的包管理工具,用于安装和管理Python库。从pip 20.3版本开始,引入了一项重要的特性——缓存机制。这一机制显著提升了包安装的速度和效率,尤其是在网络条件不佳或需…

爬虫-豆瓣电影排行榜

获取数据 requests库 获取数据环节需要用到requests库。安装方式也简单 pip install requests 爬取页面豆瓣读书 Top 250 用requests库来访问 import requests res requests.get(https://book.douban.com/top250/) 解析: 导入requests库调用了requests库中的…

明星代言6个提升企业形象的杀手锏-华媒舍

在当今竞争激烈的商业世界中,企业形象的塑造对于品牌的发展至关重要。而明星代言作为一种常见的营销手段,被广泛使用来提升企业形象和产品销售。本文将介绍明星代言的六个杀手锏,帮助您了解如何通过明星代言来提升企业形象。 1. 拥有广泛的影…

关于虚拟机CentOS 7使用ssh无法连接(详细)

虚拟机CentOS 7使用ssh无法连接 猜测:可能是虚拟机软件的网关和和centos7的网关不同导致的问题。 首先打开CentOS7的终端, 输入ifconfig,查看一下系统的ip 打开虚拟机的虚拟网络编辑器, 查看一下网关, 发现确实不一样. 这里有两种方式, 要么修改虚…

Pytorch实战(二):VGG神经网络

文章目录 一、诞生背景二、VGG网络结构2.1VGG块2.2网络运行流程2.3总结 三、实战3.1搭建模型3.2模型训练3.3训练结果可视化3.4模型参数初始化 一、诞生背景 从网络结构中可看出,所有版本VGG均全部使用33大小、步长为1的小卷积核,33卷积核同时也是最小的能…

Java | Leetcode Java题解之第205题同构字符串

题目&#xff1a; 题解&#xff1a; class Solution {public boolean isIsomorphic(String s, String t) {Map<Character, Character> s2t new HashMap<Character, Character>();Map<Character, Character> t2s new HashMap<Character, Character>(…

信息时代,呼唤新的哲学

随着计算机技术和人工智能的高速发展&#xff0c;信息时代正以前所未有的速度改变着我们的生活、工作和思维方式。在这个背景下&#xff0c;传统哲学面临着前所未有的挑战与机遇。 信息时代呼唤一种全新的哲学&#xff0c;它需要在科学技术的基础上&#xff0c;融合中国传统文…

Java-数据结构

数据结构概述 常见的数据结构 栈 队列 数组 链表 二叉树 二叉查找树 平衡二叉树 红黑树 示例&#xff1a;

【Go】编译frp,绕过内网安全工具

文章目录 概述常用命令编译环境配置开发环境拉取依赖打包exe输出运行打包好的exe测试 绕过安全产品实践frp使用教程 本文所提供的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与教学之用。文章作者无法鉴别判断读者使用信息及工具的真实用途&#xff0c;若读者将文章中的…

2024 年第十四届 APMCM 亚太地区大学生数学建模 B题 洪水灾害的数据分析与预测--完整思路代码分享(仅供学习)

洪水是暴雨、急剧融冰化雪、风暴潮等自然因素引起的江河湖泊水量迅速增加&#xff0c;或者水位迅猛上涨的一种自然现象&#xff0c;是自然灾害。洪水又称大水&#xff0c;是河流、海洋、湖泊等水体上涨超过一定水位&#xff0c;威胁有关地区的安全&#xff0c;甚至造成灾害的水…

基于惯性加权PSO优化的目标函数最小值求解matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于惯性加权PSO优化的目标函数最小值求解matlab仿真。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 &#xff08;完整程序运行后无水印&#xff09;…

Python OpenCV与霍夫变换:检测符合特定斜率范围的直线

在计算机视觉和图像处理领域&#xff0c;检测图像中的直线是一项常见且重要的任务。OpenCV 提供了许多强大的工具来进行图像处理&#xff0c;其中霍夫变换&#xff08;Hough Transform&#xff09;就是用于检测直线的经典方法。本文将介绍如何使用 OpenCV 和霍夫变换来检测图像…

使用java stream对集合中的对象按指定字段进行分组并统计

一、概述 有这样一个需求&#xff0c;在一个list集合中的对象有相同的name&#xff0c;我需要把相同name的对象进行汇总计算。使用java stream来实现这个需求&#xff0c;这里做一个记录&#xff0c;希望对有需求的同学提供帮助 一、根据指定字段进行分组 一、先准备好给前端要…

三菱plc gxwork3 0X121201F 报错;三菱标签区域的保留容量不足;

如果占用过多把r文件寄存器的地址范围改小&#xff0c;一般文件寄存器的地址r0-8000足够了

zk集群搭建

zk集群在搭建部署的时候&#xff0c;通常选择2n1奇数台。底层 Paxos 算法支持&#xff08;过半成功&#xff09;。 zk部署之前&#xff0c;保证服务器基础环境正常、JDK成功安装。 服务器基础环境 IP主机名hosts映射防火墙关闭时间同步ssh免密登录 JDK环境 1、虚拟机克隆 …

Elasticsearch 复合聚合:bucket_by_keys、date_histogram 等

在Elasticsearch中&#xff0c;聚合&#xff08;Aggregation&#xff09;是一种强大的功能&#xff0c;允许我们对数据进行复杂的分析和总结。其中&#xff0c;复合聚合&#xff08;Composite Aggregations&#xff09;是一种特别灵活的聚合方式&#xff0c;它可以将多个聚合类…