在CSS或SASS中,使用"#foo #bar {width:200px}"不建议增加文件大小？

在CSS或SASS中，使用"#foo #bar {width:200px}"不建议增加文件大小的原因是因为这种选择器的写法会增加样式的特定性（specificity），导致样式表中的选择器更加复杂和冗长。

特定性是用来确定哪个规则将会被应用到特定元素上的一种机制。在CSS中，选择器的特定性是通过计算选择器中各个部分的权重来确定的。而使用ID选择器（如"#foo"和"#bar"）会给选择器赋予较高的特定性权重，这意味着这个选择器的优先级会比其他选择器更高。

当样式表中存在大量这种高特定性的选择器时，会增加样式表的复杂性和文件大小。这是因为浏览器在解析样式表时需要逐个匹配选择器，并确定哪个规则应用到哪个元素上。选择器越复杂，匹配的过程就越耗时，从而影响页面加载速度。

为了避免这个问题，可以考虑使用更简洁的选择器，尽量避免使用ID选择器。可以通过给元素添加类名或使用其他选择器来实现相同的效果。例如，可以使用类选择器（如".foo .bar"）来替代"#foo #bar"，从而减少特定性权重，简化样式表，并提高页面加载性能。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Sass 教程

相比于之前在 css 中使用 @keyframe 来定义动画，然后在元素中调用，如果一个文件中 @keyframe 比较多的话，在我们想要调用动画的时候，动画与元素之间的关联性比较差。...但是如果你不小心，可能会让生成的 css 中包含大量的选择器复制。避免这种情况出现的最好方法就是不要在 css 规则中使用后代选择器（比如 .foo .bar）去继承 css 规则。...例如： .bip .baz { color: red; } .foo .bar { @extend .baz; } 生成的css如下： .bip .baz, .bip .foo .bar, ....foo .bip .bar { color: red; } 所以如果允许，尽可能避免这种用法。...这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。

5.8K1 0

CSS预处理器之Sass

*/ ③ Sass 代码注释 ✅ 多行注释 /* 多行注释 */ 单行注释 // 单行注释 ④ Sass 变量 ✅ 4.1 css 中变量的定义与使用 /* `:root` 伪类选择器用于选择文档根元素...变量的作用域全局作用域在 Sass 文件的任何地方定义的变量都具有全局作用域，可以在整个文件中访问和使用。...字符串（有引用与无引用字符串）：“foo”、‘bar’、car 颜色：blue、#000、rgba(0, 0, 0, .5) 布尔值空值：null list：用空格或逗号作分隔符，1.5em 1em...例如，在另一个 Sass 文件中导入 _public.scss 文件： @import 'path/to/_public.scss'; /* 在这里可以使用 _public.scss 中定义的变量和混合器...$width: 100px; .container { content: "foo" + bar; content: foo + "bar"; content: foo + bar

1641 0

Sass 基础(四)

数字：如，1，2,13,10px，　　　　字符串：有引号字符串或无引号字符串，如“foo”,'bar',baz; 　　　　颜色：如，blue，#04a3f9,rgba(255,0,0,0.5);...加法　　　　在css中能做运算的，到目前为止仅有calc()函数可行，但在Sass 中，运算只是在基本特性之一，在Sass 　　　　中可以做各种数学计算。　　　　...（一），加法　　　　加法运算是Sass中运算的一种，在变量或属性中都可以做加法运算。...编译出来css 　　　　.box{ 　　　　　　width:242px; 　　　　} 　　在sass除法运算中，当变量进行除法运算时“/”符号也会被自动识别成除法。　　　　...width：100px; 　　} 　　.list{ 　　　　width:100px; 　　} 变量计算　　　　在Sass中除了可以使用数值进行元素之外，还可以使用变量进行计算，

9947 0

前端面试（4）less，sass，stylus

标准的 CSS 注释 /_ comment _/ ，会保留到编译后的文件。单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。在/*后面加一个感叹号，表示这是”重要注释”。...方法后写不写 () 看个人习惯。默认参数方法 Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。 @arguments 犹如 JS 中的 arguments 指代的是全部参数。...{ width:300px; } #con{ width:20px; } 复制代码要点在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。...由于文章篇幅有限，所以只能介绍一些使用效率高的函数。如果你想了解更多，可以去官网的函数链接其他注释 /* */ CSS 原生注释，会被编译在 CSS 文件中。.../ / Less 提供的一种注释，不会被编译在 CSS 文件中。

1.4K2 0

Sass 基础(八)

9759 0

Scss学习笔记，持续记录

SCSS (Sassy CSS) 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能，以 .scss 作为拓展名。...;height:400px}.box-title{height:30px;line-height:30px} 文档阅读笔记通过 #{} 插值语句可以在选择器或属性名中使用变量： $name: foo;...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...@import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); @extend 的作用是将重复使用的样式...不转换今天遇到自定义的css变量中，使用scss变量或者函数是，不会被编译（例如rgba函数、或者一个变量编译成css后没有变化）。

9621 0

Sass入门使用指南

---- 快速使用在VSCode中安装Live Sass Compiler插件 Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以打开实时编译。...在html页面引入动态生成的.css文件Sass使用指南内容摘录自: https://www.sass.hk/ 1....嵌套规则 &标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。...导入SASS文件 css中的@import执行到后下载css文件,导致页面加载慢 sass中的@import在生成css的时候导入,无法额外下载 sass导入可以省略后缀导入sass部分文件通常在编写的...嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

3.3K2 0

CSS预处理器之SCSS

global; width: $width; } #bar { width: $width; } 编译后： #foo { width: 5em; } #bar { width: 5em...用 () 表示不包含任何值的空数组（在 Sass 3.3 版之后也视为空的 map）。空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。...@media Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。...*选择器列：暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列。...在指令中延伸在指令中使用 @extend 时（比如在 @media 中）有一些限制：Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS. g.

3.9K1 0

CSS拓展语言：Sass介绍

Sass的安装安装Ruby 命令行执行 gem install sass 看是否安装成功：在命令行中执行 sass -v 注意：由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon...:output.css 如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录： sass --watch app/sass:public/stylesheets 使用sass --...如下所示： //Sass语法 $width: 200px .box width: $width //SCSS语法 $width: 200px; .box { width: $width...在 /*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。插值在选择器和属性上使用变量，必须用差值。否则会报错。...%placholder不会被编译到CSS样式文件中。关于是用 Mixin 还是 %placeholder :如果你需要使用变量，最好使用 Mixin，否则使用%placeholder。

1.2K2 0

Taro 小程序开发大型实战（二）：多页面跳转和 Taro UI 组件库

或 Taro.redirectTo 即可实现页面的跳转或重定向感觉不够直观？...例如我们有三个 CSS 类 foo、bar 和 foo-bar，可以通过 classNames 函数进行条件式组合： import classNames from 'classnames`; classNames...('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar...': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar...: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' 我们也新增加一个 CSS 类 postcard

3K2 0

SCSS 学习笔记和 vscode下载live sass compiler插件配置

，使用占位符选择器%foo，然后通过 @extend 指令引入，尤其是在制作 SCSS 样式库的时候，在需要时引入，希望 SCSS 能够忽略用不到的样式，达到简略代码的目的。...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...使用参数时建议加上默认值 2.6 SCSS @extend（继承）指令在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。...也就是说，如果 " / " 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。...[ "foo" + bar ] 和 [ "foo" + "bar" ]，运算结果是有引号的，[ foo + "bar"] 和 [ foo + bar ]，运算结果则没有引号。

5171 0

Sass-学习笔记【基础篇】

编码（2）路径中的中文字符错误建议在项目中给文件命名或者文件目录命名不要使用中文字符。...示例： $width: 200px; body{ 　　width: $width; } 编译后的css： body{ 　　width: 200px; } 四、局部变量和全局变量 Sass变量有作用域这一说...个人（慕课老师）建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。...个人建议：如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。...：数字: 如，1、 2、 13、 10px；字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；【注：！

4.9K5 0

webpack深入浅出实战系列

我们从下面这个小练习开始走进 webpack 吧在 index.js 中引入 index.css const css = require('....模板 src/style/index.css .test { width: 200px; height: 200px; color: red; background-color: orange...配置样式，style，css、less、sass、postcss 等 postcss 配置编译前后 css 对比配置 autoprefixer 开启 source map 目录增加以下文件 │─...baz) // 2 // 被转成 obj && obj.foo && obj.foo.bar && obj.foo.bar.baz console.log(obj.foo.err?....并把它转成 obj && obj.foo && obj.foo.bar && obj.foo.bar. options-chain-loader.js module.exports = function

1.6K1 1

CSS 即将支持嵌套，SASSLESS 等预处理器已无用武之地？

其中使用到了 SASS 的循环函数的片段： @for $i from 1 to 200 { .g-ball:nth-child(#{$i}) { $width: #{random(50)}px; width...SASS 等预处理器中的 if() 语句最后，我们来看看预处理器中对 if() 的运用，由于 SASS 等预处理器最终还是要编译成 CSS 文件，所以 if() 其实并不太常用。...在 SASS 中，我认为最常用的 if() 可能也就是这种场景： @mixin triangle($size, $color, $direction) { height: 0; width: 0...在 CSS 动画效果中，非常多的因素我们不希望是一成不变的，我们希望的是，一些属性的值的产生由我们设定一个基础规则，一个范围中得到，这样每次刷新都能产生不同的效果。...我在这篇文章中 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画，专门讲了如何利用 SASS 等预处理器实现三角函数，以实现曲线线条，实现一些有意思的效果，像是这样： ?

8372 0

Sass初体验

，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展关于学习 SASSLess 是一套利用 JavaScript 实现的 CSS 预处理器，诞生于 2009 年由于 Less...的诞生比 Sass 要晚，并且 Less 受到了 Sass 的影响，所以在 Less 中能看到大量 Sass 中的特性所以只要学会了 Less 就等同于学会了大部分的 SassLess 和 Sass...} 表示层级结构，语句后面需要写分号企业开发中推荐使用 .scss 结尾，注意点：如果需要使用考拉编译 sass 文件，项目目录结构中(包含文件名)不能出现中文和特殊字符，就拿着之前在 less 文章当中的一个示例...: 300px background: red @include center .son width: 200px height: 200px background: blue...: 300px; height: 300px; background: red; @include center; .son { width: 200px; height: 200px

1634 0

CSS 变量教程

body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中，body选择器里面声明了两个变量：--foo和--bar。...因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。各种值都可以放入 CSS 变量。...如果该变量不存在，就会使用这个默认值。 color: var(--foo, #7F583F); 第二个参数不处理内部的逗号或空格，都视作参数的一部分。...body { --foo: #7F583F; } .content { --bar: #F7EFD2; } 上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是....--foo: if(x > 5) this.width = 10; 上面代码中，--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。

1.3K11 0

CSS3中的变量var了解

使用语法首先我们先来看一个例子： html代码：这是一段文字 css代码： .element { width:200px; height...预处理器劣势预处理器变量不是实时的也许令新手惊讶的是，预处理器局限性最常见的情况是Sass无法在媒体查询中定义变量或使用@extend。...是否应该限定其范围为文件或模块？是否应该限制在块中？由于CSS最终目的是为HTML添加样式，事实证明还有另一种有效的方法给变量限定作用域：DOM元素。...如果你正使用PostCSS来构建网站，想使用只能通过Sass实现主题化的第三方组件，那你真是不走运了。跨不同的工具集或CDN上托管的第三方样式表共享预处理器变量是不可能（或至少不容易）的。...下面给一个css变量在媒体查询中的使用： :root { --gutter: 1.5em; } @media (min-width: 30em) { :root { -

1.4K3 0

CSS3变量var深入

8082 0

一些前端题目

] } False true false 1 用纯css,html写一个导航栏的tab切换(不使用js) 方法1： ...; } .nav{ position:relative; overflow:hidden; } li{ width:200px; float:left; text-align...:center; background:#ddd; } li label{ display:block; width:200px; line-height:36px;...，点击增加按钮，则在该节点下增加一个子节点，节·点内容为输入框中内容，插入在其子节点的最后一个位置 ·提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程 ·当前被遍历到的节点做一个特殊显示...（比如不同的颜色） ·每隔一段时间（500ms，1s等时间自定）再遍历下一个节点 ·增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点

2421 0

Sass-学习笔记【进阶篇】

在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。示例：：控制一个元素隐藏或显示的代码，原理：定义一个混合宏，通过 @if...@else... ...这种写法在css中不被允许，但是在sass中却可以这么写。...另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用　　Sass会在当前目录下寻找其他Sass文件但是，有些情况下，@import会被误导并编译成css代码　　b.以下是@import..."http://foo.com/bar"; 4 @import url(foo); 1 //将被编译为： 2 @import "foo.css"; 3 @import "foo" screen; 4 @...这也是sass中的@media和css中的区别： sass中的@media query可以内嵌在css规则（代码、选择器）中，不过在编译输出最后的css文件后，他会被提出来，从选择器的嵌套中提到样式的最高层级

4.5K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云