降低scss样式的权重

最新推荐文章于 2022-07-24 12:04:23 发布
最新推荐文章于 2022-07-24 12:04:23 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moqiuqin/article/details/104634140
版权

scss的嵌套写法是方便了许多，但是带来的问题是权重的增加，如果你想通过DOM修改某个样式将会发现，要修改的样式总是被原有的覆盖，不用想，肯定是权重值不够，但是又不想用!important，那么解决的方式就是使用scss的@at-root指令，这个指令可以然你的样式在文档的根层级上输出而不是嵌套在符选择器下，这样一来通过其他方式修改样式就不用担心原来的样式权重值太高而不起作用了。
在这里插入图片描述
编译结果
在这里插入图片描述
这里只是.middle-left被输出到了根层级，但是.left-content没有使用这个指令，所以.left-content还是输出在.middle-left下的

不要葱花
关注
专栏目录
scss 权重降低
tsl_280的博客
02-08 338
scss 是用过程中需要减低dom权重时 @at-root { // 需要减低的dom .bgImgOk{ width: 100%; height: 100%; } }
Css样式权重
野生松
03-02 453
一、Css样式权重 !important，权重最大为10000 内联样式，权重为1000 ID选择器，权重为100 类选择器、属性选择器、伪类选择器（:hover），权重为10 标签选择器、伪元素选择器(:nth-of-type()），权重为1 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0 ...
关于CSS样式的权重问题
qq_39073792的博客
06-25 419
当涉及到团队的大型项目时，没有内置于CSS中用于维护和管理，因此CSS面临的常见问题是： 缺乏代码结构或标准会大大降低可读性; 项目规模增加时的可维护性; 由于代码首先无法读取而导致的特殊性问题。 如果我们使用了一些框架如Boostrap什么的，我们就有可能遇到无法覆盖默认样式的问题，这个时候，我们就要考虑到选择器的特异性了。 比如我们来看以下两个样式： body .card img { b...
CSS权重及常用方法
Bombas的博客
06-19 797
CSS（层叠样式表：Cascading Style Sheets）：对网页样式的编写 引入CSS 1. 行间样式：<div style = ""></div> 2.页面级css：<head><style type="text/css"></style> </head> 3.外部css文...
css优化——低权重原则
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
09-03 955
css设置的样式是可以重叠的，如果两个不同的的选择符对同一个标签的定义产生冲突，就会设计到css选择符的权重问题了。 当不同的选择符样式设置有冲突时，会采用权重高的选择符设置样式。 权重的规则如下：HTML标签的权重是1，class的权重是10，id的权重是100，例如p的权重是1，“div em”的权重是1+1=2，“strong.demo”的权重是1+10=11，“#text.red”的权
关于SCSS入门功能（上）
Evan_Xuya_FF的博客
12-30 1330
最近开始学习使用scss，把我的感受和大家分享一下 首先是机制 我们直接手写的是.scss，然后在启动工程的情况下，scss会自动编译成.css，来提供给HTML，所以反过来说，我们在html中要Link href的是.css，（.scss的机制会加测每次内容改变时候重新编译生成最新的css（覆盖旧的），其中你会在文件目录下看到一个.css.map的文件，应该是编译的产物，因为看到是json数
前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范
09-24
- ID选择器的权重过高，可能导致覆盖其他选择器，增加样式的维护难度。优先使用class选择器，保证样式易于复用和调整。 3. **避免使用标签名**： - 在构建选择器时，使用有意义的class名而非HTML标签。这样做可以...
前端编码规范：CSS与Sass(SCSS)实践指南
- ID选择器的权重过高可能导致难以覆盖或调整样式，应尽量避免在CSS选择器中使用ID。 4. **避免在选择器中使用标签名**： - 为了保持代码的灵活性和可维护性，应避免在选择器中使用HTML标签，如`div`或`li`，而应...
HTML-CSS入门-理解CSS选择器权重的精华
CSS（Cascading Style Sheets）是一种样式表语言，用于描述网页的表现层样式，包括布局、颜色、字体等。HTML和CSS通常一起使用，HTML负责网页结构，而CSS负责网页样式。 ## 1.2 HTML与CSS的联系与区别 HTML和CSS是...
前端编码规范：优化CSS与Sass的ID、class命名与选择器策略
比如，将`.content.title`替换为`.content .title`，这样可以提高样式的灵活性和可复用性，同时避免因ID选择器权重过高导致的样式覆盖问题。 在编写CSS选择器时，应尽量减少对HTML标签的依赖，使用更具语义的class...
css权重问题
qq_33418050的博客
08-02 587
权重即重要性，重要的优先级就比较大。 在css中，权重有限判断： 行内样式>内部样式>外部样式。 在同一样式下在判断选择器权重。如下： 通用选择器（*） ！important独立于css权重之外，效果为强制应用某样式。 之前遇到一个问题， 伪类hover字体颜色改变，js操作dom也改变了字体的颜色，导致hover失效。 原因是js操作dom是直接在行内样式中操作，权重大于
scss点滴yan
weixin_42201346的博客
07-24 270
scss,sass,css
php css加权重,让css的权重变得更友好的小技巧
weixin_36472567的博客
03-23 166
在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联(cascade)能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。技巧一：样式总是作为特定属性组合出现一个很好的例子就是color和bakground-color的组合。除非你只做小调整，不然你需要一起调整他们。当给一个元素添加背景颜色时，它可能不包含任何文本，但可能会有一些子元素。因此，我...
选择器权重
qq_53841687的博客
05-06 2266
一、选择器权重的优先级 ！important 至高的 内联样式 1000 id选择器 100 类选择器、伪类选择器 10 元素选择器 ...
CSS 如何提高权重？
weixin_46422035的博客
06-22 5950
如何计算CSS权重？覆盖CSS样式时的最优解？一起来看看吧
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
lb_nizhanban的博客
06-13 2353
一阶段面试题： CSS浮动怎么理解的 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题 绝对定位相对定位怎么理解 absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9690
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
css的优先级 和 权重
weixin_44624120的博客
04-30 1176
css的优先级 和 权重 1. 权重概念：        权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。        权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。 2. css权重的理解：     &nbsp
CSS权重——发现样式正确但不起效果时，就要考虑规则的权重问题
Smile林的博客
04-07 507
什么是权重？ 当很多的规则(样式)被应用到元素时，权重是一个决定那种规则生效，或者优先级的过程 样式权重的计算时相加关系，值越高，权重越高，优先级越大 权重等级与权值 行内样式（1000）>id选择器（100）>类，属性选择器和伪类选择器（10）>元素和伪元素（1）>*通配符(0) 最高：!important加在样式属性值后，权重值为 10000（尽量不要使用） ...
css 权重及！important
热门推荐
林中路
10-10 2万+
在编写css样式的时候，我们会时常碰到自己写的样式没有生效，尤其是引用一些外部框架的时候，这种情况更容易发生。CSS样式的优先级按照官方的表述，css优先级如下： 通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式 举例：例如以下代码：index.html<!DOCTYPE html> <html> <head lang="en">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不要葱花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值