百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)

ccwgpt 2024-09-23 04:24 36 浏览 0 评论

使用 CSS 最困难的部分之一是处理CSS的权重值,它可以决定到底哪条规则会最终被应用,尤其是如果你想在 Bootstrap 这样的框架中覆盖其已有样式,更加显得麻烦。不过随着 CSS 层的引入,这一切都发生了变化。 这个新功能允许您创建自己的自定义 CSS 层,这是有史以来第一次确定所有 CSS 代码权重的层次结构。 在本文中,我将剖析这对您意味着什么,它是如何工作的,以及您今天如何开始使用它。

什么是层(Layers)

创建您自己的自定义图层是 CSS 的新功能,但图层从一开始就存在于 CSS 中。 CSS 中有 3 个不同的层来管理所有样式的工作方式。

浏览器(也称为用户代理)样式 - user agent style
用户样式 - User Styles
作者样式 - Author Styles

浏览器样式是应用于浏览器的默认样式。这就是为什么 Chrome 和 Safari 中的按钮看起来不同的原因。在浏览器层中找到的样式在浏览器之间是不同的,并且给每个浏览器一个独特的外观。

下一层是用户样式,这并不是您真正需要担心的事情。这些通常是用户可以编写并注入浏览器的自定义样式,但浏览器不再真正支持这些样式。用户可能会更改一些浏览器设置,这些设置会向该图层添加样式,但在大多数情况下,可以完全忽略该层。

最后,我们来到作者层。这是您最熟悉的层,因为您编写的每一段 CSS 代码都属于这一层。

这些层分开的原因是因为它可以很容易地覆盖浏览器样式和用户样式中定义的代码,因为层定义了自己的层次结构,完全忽略了权重的影响。

这 3 个 CSS 层是有序的(浏览器样式、用户样式、然后是作者样式),后面层中的每个样式都将覆盖前一层的任何样式。这意味着即使浏览器样式定义了一个超级特定的选择器,例如#button.btn.super-specific,并且您的作者样式定义了一个超级通用的选择器,例如按钮,您的作者样式仍然会覆盖浏览器样式。

这实际上已经是您可能一直在使用而没有意识到的东西。

* {
  box-sizing: border-box;
}

上面的选择器没有权重,因为 * 符号对权重没有贡献。 这意味着例如使用 p 作为选择器的 p 标签的浏览器样式在技术上比 * 选择器更具体,权重更高。 但是,这一切并不重要,因为作者样式位于比浏览器样式层晚的层中,因此您的代码将始终覆盖浏览器样式。

理解这一点至关重要,因为使用这个新的图层 API,您可以在作者图层中创建自己的图层,从而更轻松地处理特定性。

如何创建你自己的层

下面来看个例子:

很明显,这是我们正常理解的CSS, ID设置的颜色权重更高,所以按钮显示为红色。让我们使用@layer给它们加上两个层,看看是什么效果:

按钮变成蓝色。为什么会这样?

我们给两条CSS分别建立了base和utilities层,很明显,后面创建的层的样式覆盖了前面层的样式,尽管前面层的样式有更高的权重。这就是层的默认工作原理。当然层的顺序是可以指定的,

@layer utilities, base;

您需要做的就是编写@layer 关键字,后跟以逗号分隔的层列表。 这将按从左到右的顺序定义所有层,其中列出的第一层到最后一层的权重是依次增加的。 然后,您可以稍后使用普通的@layer 语法向每个层添加代码,而不必担心定义层的顺序,因为它们都在这一行中定义。 需要注意的是,这行代码必须在定义任何层之前出现,所以我通常将它作为我的 CSS 文件中的第一行。如上图,通过指定层的顺序,我们让base层应用在utilities层之后,所以按钮又显示为红色。

导入层

上面这两种方式都是导入bootstrap框架的CSS,并且把他们放在framework层中,这样你如果想要覆盖它已有的样式,只需要新建一个自己的层,放置在framework层后面就行。像下面这样。

匿名层

匿名层不常用,但它写在后面可以覆盖其他层的样式,像下面可以把按钮设为橙色。

不在层里的样式

不在层里的样式会有更高的权重,下面这个列表会让你看得更清楚覆盖是怎么发生的

层还可以重叠设置,不过很少用。具体的用法可以查阅相关文档。

浏览器支持

自从IE死了以后,所有主流浏览器都已支持这一特性。大家请放心使用。

相关推荐

如何高效实现API接口的自动化测试?

实现API接口的自动化测试是一个多步骤的过程,涉及需求分析、测试用例设计、环境搭建、脚本编写、执行测试、结果分析和持续集成等多个环节。选择合适的工具和框架也是成功的关键。嘿,咱来聊聊实现API接口自动...

总结100+前端优质库,让你成为前端百事通

1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...

混合开发到底怎么个混法?(混合开发rn)

引言最近几年混合开发越来越火,从PhoneGap到Cordova到Ionic,再到ReactNative,到Flutter。同时在搜索引擎中诸如IonicVSReactNativeRN和Weex+...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

【直接收藏】前端 VUE 高阶面试题(一)

说说vue动态权限绑定渲染列表(权限列表渲染)首先请求服务器,获取当前用户的权限数据,比如请求this.$http.get("rights/list");获取到权限数据之后,在列表中...

Vue采用虚拟DOM的目的是什么?(vue2 虚拟dom)

虚拟DOM更新其实效率并不像大家想象中的那么高,而且React官方也从来没说过虚拟DOM效率有多高,相反React虚拟DOM的实现也不是所有虚拟DOM产品中最好的。但是通过虚拟D...

什么是 JavaScript?(什么是党的旗帜)

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师然冬JavaScript(JS)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。(MDN...

Weex在内涵发现页中的工程实践(weex唯客交易所官网)

React-Native和Weex是目前最为火热的两个客户端跨平台解决方案。从去年2016年9月份开始,IES在抖音产品中应用了ReactNative,中途遇到了很多的问题,尤其是长列表的性能问题一...

新恒汇:公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务

证券日报网讯新恒汇7月3日在互动平台回答投资者提问时表示,公司主要业务包括智能卡业务、蚀刻引线框架业务以及物联网eSIM芯片封测业务。具体请关注公司公告和公开披露信息。(编辑王雪儿)...

“移”科普——什么是物联网?(移动设备物联网物联网应用实例)

物联网(InternetofThings,简称IoT)是指通过互联网将物理世界与数字世界相连接,实现物与物之间的智能互联的网络。它是一种新型的信息通信技术,通过传感器、嵌入式系统、网络技术等手段,...

如何自己搭建一个物联网平台?(自建物联网云平台)

自己搭建一个物联网(IoT)平台需要涉及多个关键步骤,包括硬件设备的选择、软件开发、网络通信、安全性设计以及数据管理。以下是搭建物联网平台的基本流程:1.确定物联网平台架构一个完整的物联网平台通常包...

物联网数据接入篇-应用层 Modbus(5)

前四篇文章讲述的是TCP/IP模型中的网络接口层、网络层、传输层、应用层一,这里到了第四层应用层二。由于协议比较多,就分开篇来介绍。这篇讲Modbus协议,后面再讲MQTT协议、CoAP协议、...

乐鑫ESP32-C5全面量产:行业首款双频Wi-Fi 6的RISC-V SoC

IT之家5月2日消息,乐鑫信息科技4月30日宣布,ESP32-C5现已全面进入量产。ESP32-C5宣称是行业首款2.4&5GHz双频Wi-Fi6的RISC-...

Vue Shop Admin:强大而易用的后台管理系统模板

VueShopAdmin是一个基于Vue.js框架的后台管理系统模板。它具有简洁、易用和美观的特点,非常适合开发人员用于快速构建各种类型的管理系统。这个模板使用了最新的技术,如Vue3、V...

基于Prometheus的自动化巡检(prometheus自动发现详解)

!!大家好,我是乔克,一个爱折腾的运维工程,一个睡觉都被自己丑醒的云原生爱好者。作者:乔克公众号:运维开发故事道路千万条,安全第一条。操作不规范,运维两行泪。前言目前,大部分公司都采用Promet...

取消回复欢迎 发表评论: