-
CSS优先级-权重叠加计算
•先上总结:a.说明:i.公式:(行内,Id,类,标签)ii.规则:从左至右依次做个数上的比较,如果同级数量一致,则比较下一级个数,直到某一级数量不一致,则数量较大的一方选择器的优先级较高,后面的数量就无需比较了。如选择器1(0,0,1,0),选择器2(0,0,0,3),那么选择器1的优先级高于选择
-
Web前端学习笔记4——CSS
CSS基本语法规范CSS的使用的标签：<style></style>style标签一般放在head里面，CSS一般由一个选择器和一个或多个声明组成示例如下：1<head>2<metacharset="utf-8">3<title>4Test
-
Web前端进阶高薪必会的54个CSS重难点知识梳理（1）
本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。 因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前1-12个CSS重难点整理出来，具体内容如下：CSS选择器与
-
CSS基本用法
1、什么是CSSCascadingStyleSheet级联样式表。表现HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。 2、CSS的发展史 CSS1.0读者可以从其他地方去使用自己喜欢的设
-
CSS 笔记
CSSCSS，或CascadingStyleSheets（层叠样式表或级联样式表），用来给浏览器添加样式。引入CSS的方式Import内联InlineStyle使用style属性来引入CSS<h1style="color:blue;"></h1>嵌入EmbeddedStyle
-
谷歌将为 Android 带来全新的时间选择器 UI
谷歌在今年早些时候的I/O大会上发布了其Material设计语言的最新版本——MaterialYou。从那时起，谷歌就一直在为自家的App添加MaterialYou元素。在过去的几个月里，谷歌已经为Chrome浏览器、短信、通讯录等进行了重新设计。 现在，谷歌正在为其Andro
-
探究 CSS 选择器的性能真相
大家好，我是CUGGZ。在CSS中，有些选择器会比其他选择器执行速度更快。下面就来深入研究CSS选择器的性能真相，看看如何编写CSS选择器才能更快地执行！幕后编写CSS选择器的方式会影响浏览器如何渲染页面。每当页面发生变化时，运行它的浏览器引擎需要查看新的DOM树，并确定如何根据可用的CSS样式表对
-
CSS 原生嵌套语法来了！
大家好，我是CUGGZ。最近在看caniuse.com时发现，Chrome和Edge浏览器将在109版本实验性支持CSS原生嵌套语法！1月10日，Chrome109发布；1月26日，Safari技术预览版162发布。这两个浏览器版本都带来了CSS嵌套的实验性支持。Chrome官方指出，添加将CSS样
-
优化 CSS 代码的12个小技巧
大家好，我是CUGGZ。今天来分享12个优化 CSS代码小技巧！1、避免高消耗属性分析表明，一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性：box-shadowborder-radiusposition:fixedtransform:nth-childfilter上
-
聊聊CSS选择器，最后两种你可能都没见过
什么是CSS选择器顾名思义，CSS选择器就是通过某些规则选中页面上的HTML元素，并且把样式应用到选中的元素上。通用选择器通用选择器就是选中所有元素，代码如下：意思就是选中页面上所有元素，并且把它们的文字都设置为红色。ID选择器ID选择器就是通过ID属性来选中元素，这个ID选择器最好不用在页面上重复
-
两道超有意思的 CSS 面试题，试试你的基础
今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下：复制<div><pid="a">FirstParagraph</p></div>1.2.3.样式如下：复制p#a{color:green;}div::first-line{color:blue
-
盘点关于“时间”的功能测试点，你知道多少？
“时间”在很多应用中都会涉及，例如：时间范围选择器，时间输入框，日期计算器等等。那么针对“时间”这类功能的测试要点你又知道多少呢？今天我们来聊聊关于“时间”的测试要点。一、场景：时间范围选择器如下图所示，为某个时间范围选择器，针对时间范围选择器的测试要点有以下几点。图1某个时间范围选择器不考虑业务逻
-
如何优雅地覆盖组件库样式？
大家好，我是年年!组件库的样式覆盖不掉，这应该是很多前端在工作中遇到过的问题。今天从实际案例出发分析原因，最后会给出在React和Vue项目中的最优解。本文会讲清：React中CSSModule的原理是什么?:global是做什么的?Vue中Scoped的原理是什么?深度作用选择器是什么?先不讲概念
-
浅谈逻辑选择器 Is、Where、Not、Has
在CSS选择器家族中，新增这样一类比较新的选择器--逻辑选择器，目前共有4名成员：:is:where:not:has本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。:is伪类选择器:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。在之前，对于
-
手写 Css-Modules 来深入理解它的原理
我们知道，浏览器里的JS之前没有模块的概念，都是通过不同的全局变量(命名空间)来隔离，后来出现了AMD、CMD、CommonJS、ESM等规范。通过这些模块规范组织的JS代码经过编译打包之后，运行时依然会有模块级别的作用域隔离(通过函数作用域来实现的)。组件就可以放在不同的模块中，来实现不同组件的J
-
CSS 代码优化的12个小技巧
今天来分享一些有助于提高性能的CSS代码优化小技巧!1.避免高消耗属性分析表明，一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性：box-shadowborder-radiusposition:fixedtransform:nth-childfilter上述属性都是对性能要求比较
-
一篇文章带你了解 CSS 属性选择器
属性选择器对带有指定属性的HTML元素设置样式。可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。一、了解属性选择器CSS属性选择器提供了一种简单而强大的方法，可以根据特定属性或属性值的存在将样式应用于HTML元素。可以通过将属性(可选地带有值)放在一对方括号中来创建属性选择
-
百分之四十的人都做错的一道 CSS 面试题
前天的啥时候在微头条放了一道关于css选择器权重的面试题，只有两个答案，但是40%的人都回答错了，今天就来详细地看看。复制<style>.boxh1#title{color:red}#boxh1.title{color:blue}</style><divid="box"
-
10个必须知道的Chrome开发工具和技巧
1.模拟慢速网络和慢速设备我们可能习惯了在城市的网速，那是杠杠的，并不意味网速在中国哪个都一样的，在一些偏远地方，网速依然慢的可怜，所以有时候我们所做的产品是需要考虑网速慢的情况的，那怎么模拟呢?打开谷歌浏览器的performance选项卡，然后单击右上角的齿轮图标就可以看到Newwor
-
CSS选择器和优先级总结，告诫自己不能任性使用！important
如果在项目里面使用了通用的reset.css样式，但是在具体的页面里面要对同一个样式进行覆盖式修改，不借助与scoped的和innerstyle，你会怎么做？会不会像我一样在刚接触的时候给要覆盖的样式后面加上!important属性本文将告诉大家关于CSS选择器和优先级总结，同时告诫大家
