读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 zepto的css选择器 zepto.qsa 我们都知道，...很多时候，我们都用$ 来获取DOM对象，这跟 zepto.qsa 有很大的关系。...这是出于性能的考虑。这里有个简单的测试。这个测试里，页面上只有一个元素，如果比较复杂的时候，差距更加明显。 好了，开始逐行分析代码。...参数 element 开始查找的元素 selector 选择器 变量 found： 已经找到的元素 maybeID = selector[0] == '#'： 判断选择器的第一个字符是否为 #， 如果是...一一来看一下： 第一个的判断条件为 selector[0] == '<' && fragmentRE.test(selector) 。selector 的第一个字符为 < ，并且为html标签 。
2.1.1 选择器嵌套 避免了重复输入父选择器，复杂的 CSS 结构更易于管理 2.1.2 父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...2.10.4 List 函数 List 函数操作 List，length() 返回列表长度，nth() 返回列表中的特定项，join() 将两个列表连接在一起，append() 在列表末尾添加一个值...2.10.6 selector 选择器函数 选择符相关函数可对CSS选择进行一些相应的操作，例如：selector-append()可以把一个选择符附加到另一个选择符，selector-unify...可能@use "" as * 来取消命名空间，这种方式加载的模块被提升为全局模块 注意：这种方式慎用 2.14.2 定义私有成员 如果加载的模块内部有变量只想在模块内使用，可使用...规则没有被移动到顶层，因为在 @at-root (without: .nested) 中指定了排除该选择器。
虽然您可能熟悉 CSS 的基础知识，但仍有大量高级 CSS 选择器等待着提高您的编码技能并增强您的网页设计能力。在本博客中，我们将探讨每个 Web 开发人员都应该了解的七个高级 CSS 选择器。...这些选择器将帮助您简化代码，提高可维护性，并使您的网站在视觉上更具吸引力。1. :nth-child() 选择器：选择器:nth-child()允许您根据特定元素在父元素中的位置来定位特定元素。...:not() 选择器：选择器:not()允许您从 CSS 规则中排除特定元素。当您想要对页面上的大多数元素（但不是特定的少数元素）进行样式设置时，这非常方便。...[属性^="值"]选择器：带有“开头为”( ) 运算符的属性选择器^允许您选择属性值以特定字符串开头的元素。...:焦点可见选择器：选择:focus-visible器是一个CSS伪类，当元素处于焦点并且用户使用键盘或其他非鼠标输入方法与页面交互时，它以元素为目标。
CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print...> 3、@import方式引入 @import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在中的......；而Media Query是一个用于判断输出设备是否满足某种条件的表达式； 3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况.../css" /> not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。..." type="text/css" /> only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
1、使用:not()伪类简化你的CSS :not()伪类允许你将样式应用于所有不匹配指定选择器的元素。这是简化你的CSS并避免手动列出元素或应用类来排除某些元素的好方法。...使用:not()伪类可以帮助你简化CSS代码，避免手动列出要排除的元素或添加额外的类。通过使用:not()，你可以直接选择需要应用样式的元素，而无需为要排除的元素指定样式。...伪类来选择和样式化父元素的第一个和最后一个子元素。...这对于给列表的第一个和最后一个项目添加特定样式，或者为导航菜单的第一个和最后一个链接添加特殊效果非常方便。...这可以用于创建滚动效果或突出显示特定部分，而无需依赖JavaScript。 使用:target伪类，你可以根据URL的片段标识符来选择并样式化特定的元素。
目录 一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...（2）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。...比如：用:only-child选择器来修饰的嵌套元素，看是否起作用。 的伪类有4种，具体如下表所示。
"); 不知道大家留意没有，其中两种方式引入CSS样式都有一个共同的属性“media”，而这个“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media...”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。...> 3、@import方式引入 @import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在中的…中引入，.../css" /> not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。..." type="text/css" /> only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。...引入媒体类型极为相似，也是通过media属性来指定的。... @media是CSS3中新引进的一个特性，称为媒体查询。...；而Media Query是一个用于判断输出设备是否满足某种条件的表达式； 3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况...，可以用来排除不支持媒体查询的浏览器。
css3选择器分类 css3选择器在最新的版本中作为一个独立的模块分离了出来，而css选择器有哪些呢？又该如何分类，请看下图。 ?...选择器攻略 基本选择器 id,class,*通配符选择器，复合选择器（选择器分组），无兼容问题 层次选择器 后代选择器：e f;子选择器 e>f ;相邻兄弟选择器 e+f,只能选择之后的一个；通用兄弟选择器...,:empty ,等，兼容ie9+ 否定伪类 ：not() 针对性排除，兼容ie9+ 伪元素 伪元素在新的规范中为双冒号，为了区别伪类，ie6-8只识别单冒号，写法不同，无兼容问题 属性选择器 针对属性...具体的支持情况根据js库来决定 ? <!...Selectivizr要想在IE下起作用，需要时标准模式，请检查您的页面头部是否有DTD 。
本文给大家一个小技巧，可以快速完成这些临时性小需求，用到的知识是CSS的选择器功能。 整个过程分几个步骤，下面分别讲解。...现代网页技术中，大量使用CSS来布局页面，相对来说使用CSS选择器可能比xpath来定位网页内容更方便，毕竟前端工程师自己就是用CSS来定位元素并设置格式，我们用它来定位元素并获取内容而已。...具体CSS选择器的知识，想深入学习，可以自行到W3School等地方学习， 例如此链接：https://www.w3school.com.cn/css/css_selectors.asp 这里有更高级的...CSS选择器定位，一般用多个类名去限定其范围，即当前的节点类名，往上再找其父级唯一的类名来辅助定位下。...再缩小范围，加上每个轮播图的特定的类名mod，此时的CSS Selector表达式为【.promo-bd .mod】，两个类之间有空格，代表找promo-bd类下面的后代mod类。
该方法返回一个只读的CSSStyleDeclaration对象，其中包含特定元素的所有计算样式。...property){ return false; } var value = elem.style[camelize(property)], // 先获取是否有内联样式 css; // 获取的所有计算样式...4.4 排除特殊情况 // 检测获取的背景色是否有效 function checkBgValue(elem){ var value = getStyle(elem, 'background-color...true : false; // 是否有颜色 // 排除特殊情况 if(value == "transparent" || value == "rgba(0, 0, 0, 0)"){ // 未设置...所以，这个浑水我也不趟 O(∩_∩)O哈哈~ 六、改进的点 其实特殊情况排除的判断，我偷懒没做到最好——rgb颜色值和特定颜色值(比如red)没有进行统一的转换，只是加了生硬的判断if(value ==
CSS选择器是网页样式设计的核心组成部分，它们使开发者能够精准定位页面上的元素并施加相应的样式。在众多选择器中，高级选择器因其强大的定位能力和灵活性备受青睐。...后代选择器 (Descendant Selector) 后代选择器通过空格分隔两个或多个选择器，表示第一个元素的所有后代中符合第二个选择器条件的元素。...Selector) 相邻兄弟选择器使用加号+来选择紧跟在一个元素之后的下一个元素。...([href]) { color: gray; } /* 第三个子元素 */ li:nth-child(3n) { background-color: yellow; } :not() 用于排除特定条件的元素...通过巧妙运用这些高级选择器，开发者能够在CSS中实现更为复杂和精细的样式控制，进一步提升用户体验和页面美感。
为了做到这点，CSS 引擎会查看样式表单中空的盒子。如果这个属性默认是继承的，那么 CSS 引擎就会向树上查找是否有一个祖先节点有值。...假如在你的电脑上有四个核心，那么它会以接近原来四倍的速度运行。 通过规则树来加快样式重置 对于每个 DOM 节点， 都需要CSS 引擎去遍历所有的规则去实现选择器匹配。...如果在列表中的大多数选择器和已有的分支相同，那么它会沿用同样的路径。但是它有可能会遇到这种情况——列表中的下一条规则并不在当前树的分支中，只有在这种情况下它才会添加一个新的分支。 ?...然后，在引擎开始计算下一个节点的样式之前，它会运行一些检查，检测是否有可用的缓存。 这些检查是: 两个节点是否拥有相同的 id, 类名, 或者其他？如果是，那么他们会匹配到相同的规则。...对于所有那些不是基于选择器的——内联样式，引擎会检查比如，节点是否有相同的值？如果是，那么先前的规则要么不被覆盖要么以同样的方式被覆盖。 节点的父元素是否指向相同的计算样式对象？
想想自己为什么要学CSS，作为一个开发过前端的人员来说，调试一个图片花了半天的时间，最后发现分隔符用错了，实在是一件很丢人的事情。...因此，痛下决心来学习CSS，最近一周也会更新下相关的学习笔记。 CSS3中使用了很多的属性选择器，通过这些属性选择器，可以根据我们自己的设计来定义元素的样式，制作精美的网页。...CSS3属性选择器 下面是CSS3的属性选择器的语法，及使用。...伪元素选择器 通常，CSS中会有一些已经定义好的元素选择器，我们通过 选择器:伪元素{属性名：值} 来定义。 ...:123 } 4 before：某元素之前插入内容 常用选择器 root：整个DOM的元素定点，也就是html not：排除特定的元素 empty：比如一个列表空的那个元素 target：链接指定的目标
本文的重点也就集中在第二条分支上，我们来探究一下 CSS 解析原理。 二、Webkit CSS 解析器 浏览器 CSS 模块负责 CSS 脚本解析，并为每个 Element 计算出样式。...rule 转换为 CSSRuleSet 中的 rule ； 基于这些个 CSSRuleSet 来决定每个页面中的元素的样式； 三、CSS 选择器解析顺序 可能很多同学都知道排版引擎解析 CSS 选择器时是从右往左解析...因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。...来看看从右到左来解析选择器： 首先就查找到 的元素； 紧接着我们判断这些节点中的前兄弟节点是否符合 P 这个规则，这样就又减少了集合的元素，只有符合当前的子规则才会匹配再上一条子规则。...到这里，我们来解决上述问题： 首先，要明确，内敛样式只是 CSS 三种加载方式之一； 其次，浏览器解析分为两个分支，HTML Parser 和 CSS Parser，两个 Parser 各司其职，各尽其责
我提出了另一种方案：“我们能不能仅用CSS来实现这个效果？” 他迟疑了一下：“但是CSS怎么能识别输入框是否聚焦呢？” 我提醒他：“你有没有试过使用伪类选择器？” “伪类？我通常只用类选择器。”...2、选择特定位置的元素 伪类选择器还可以用来选择处于特定位置的元素，例如第一个子元素、最后一个子元素或者是父元素的唯一子元素。这对于设计复杂的布局和样式非常有用，尤其是在处理列表、表格和导航菜单时。...八、为啥需要属性选择器 属性选择器在CSS中的引入提供了一种强大的方式来根据元素的属性及其值来选择元素，从而应用特定的样式。...这种选择器的存在和使用有几个关键的原因和优势： 1、精确选择和样式化元素 在复杂的网页设计中，开发者可能需要对具有特定属性或属性值的元素应用样式，而不是仅基于元素类型、类或ID。...示例 假设我们想为一个列表中的第一个项目添加特殊样式，我们可以使用子选择器和伪类选择器的组合来实现这一点： ul > li:first-child { color: red; } 这个示例展示了如何使用组合选择器来精确选择并样式化特定的元素
本文的重点也就集中在第二条分支上，我们来探究一下 CSS 解析原理。 二、Webkit CSS 解析器 浏览器 CSS 模块负责 CSS 脚本解析，并为每个 Element 计算出样式。...中的 rule 转换为 CSSRuleSet 中的 rule ； 4、基于这些个 CSSRuleSet 来决定每个页面中的元素的样式； 三、CSS 选择器解析顺序 可能很多同学都知道排版引擎解析 CSS...3、因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。...来看看从右到左来解析选择器： 1、首先就查找到 的元素； 2、紧接着我们判断这些节点中的前兄弟节点是否符合 P 这个规则，这样就又减少了集合的元素，只有符合当前的子规则才会匹配再上一条子规则。...浏览器还有一个非常棒的策略，在特定情况下，浏览器会共享 computedStyle，网页中能共享的标签非常多，所以能极大的提升执行效率！如果能共享，那就不需要执行匹配算法了，执行效率自然非常高。
CSS嵌套提供了将一个样式规则嵌套在另一个样式中的能力，子规则的选择器相对于父规则的选择器。类似的行为以前需要CSS预处理器。 在Web开发中，CSS是一种关键的技术，用于样式化HTML元素。...CSS原生嵌套语法是一种CSS预处理器中常见的语法，它允许我们在样式表中使用嵌套的规则和选择器来组织样式代码。通过嵌套语法，我们可以更清晰地表示元素之间的层级关系，提高代码的可读性和维护性。...通过嵌套选择器，我们可以更准确地选择特定的元素，并避免使用过于具体的选择器。这使得我们的样式表更加简洁和可扩展。...从上面的浏览器版本支持来看（我使用的是谷歌浏览器） 其中淡紫色是部分支持，绿色是完全支持。所以要先查看一下自己的浏览器的版本。...嵌套，就是将一个 CSS 规则放在另一个（嵌套规则）中，子规则的选择器将相对于父规则的选择器。这有利于代码的模块化和可维护性。
CSS 支持的选择器有许多不同的类型，除此之外还有其它的一些常用的选择器，如下所示: 选择器名称 选择的内容 示例 类型选择器（标签或元素选择器） 所有指定类型的 HTML 元素 p 选择 元素...ID 选择器 具有特定 ID 的元素。...单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID #my-id 选择 或 类选择器 具有特定类的元素。...单一页面中，一个类可以有多个实例 .my-class 选择 和 属性选择器 拥有特定属性的元素 img[src] 选择...特定状态下的特定元素（比如鼠标指针悬停于链接之上） a:hover 选择仅在鼠标指针停在链接上时的 元素 关系选择器 将其他选择器组合起来，更复杂的选择元素。
/css" /> 上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。...来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。.../css" /> not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。..." type="text/css" /> only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。...，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
