当前位置: 首页 > 面试题库 >

CSS组合器优先级?

臧曜瑞
2023-03-14
问题内容

像这样的组合器优先吗?

a > b ~ c d

(注之间的空间c,并d为后代组合子)

还是从左到右阅读,就像

((a > b) ~ c) d


问题答案:

不,在组合器中没有优先级的概念。但是,在复杂的选择器中存在元素顺序的概念。

可以从对您有意义的任何方向读取任何复杂的选择器,但这并不意味着组合器是分布式的或可交换的,因为它们表示两个元素(例如ancestordescendant和)之间的关系previous + next。这就是为什么元素顺序很重要的原因。

但是,根据Google的说法,浏览器实现了其选择器引擎,因此它们 从右到左
评估复杂的选择器:

引擎[Gecko]从最右边的选择器(称为“键”)开始,从右到左评估每个规则,并遍历每个选择器,直到找到匹配项或放弃该规则。

Mozilla的文章“ 编写可在MozillaUI中使用的高效CSS”的一节描述了其CSS引擎如何评估选择器。这是特定于XUL的,但是Firefox的UI和Firefox视口中显示的页面使用相同的布局引擎。

如Google在上面的引文中所述, 键选择器 只是指最右边的简单选择器序列,因此它也是 从右到左

样式系统通过从键选择器开始,然后向左移动(在规则选择器中查找所有祖先)来匹配规则。只要选择器的子树继续检出,样式系统就会继续向左移动,直到它匹配规则或由于不匹配而放弃。

请记住两件事:

  • 这些是根据 实现细节记录的 ; 从本质上讲,选择器就是选择器,它要做的就是匹配一个满足特定条件的元素(由选择器的组件布置)。从哪个方向读取取决于实现。正如另一个答案所指出的,规范没有说明在组合器优先级中或组合器优先级中评估选择器的顺序。

  • 这两篇文章都没有暗示每个简单选择器都 在其简单选择器序列中 从左到右进行求值(有关为什么我认为 并非 如此。文章的意思是,浏览器引擎将评估键选择器序列,以找出其工作的DOM元素是否与之​​匹配,如果匹配,则 通过跟随组合器进入 与之匹配的任何元素,检查 下一个选择器序列 顺序,然后冲洗并重复直到完成或失败。

话虽如此,如果您要我阅读选择器并用简单的英语描述他们选择的内容,我也会从右到左阅读它们(不是我确定这是否与实现细节有关!)。

因此,选择器:

a > b ~ c d

表示:

选择作为d元素的后代的任何元素,该c元素 是该b元素 的子代(直接后代),并a紧随该元素。



 类似资料:
  • 问题内容: 我的网页包含: 引用的样式表包含: 我在ID中有一张表格,希望单元格有一些填充。但是,引用的样式表优先于内联样式。我可以通过Firebug直观地看到这一点。如果我关闭Firebug中的指令,则向左填充将生效。 我该如何上班? 问题答案: 正如其他人提到的那样,您有一个特异性问题。当确定两个规则中的哪一个优先时,CSS引擎会计算每个选择器中的s 数量。如果一个比另一个多,就使用它。否则,

  • 由于前面章节所述的CSS继承特性以及多种类型的选择器作用域范围会出现重叠,所以常会有多个CSS规则作用于同一个HTML元素。比如对于下面的HTML代码: <p class="message" id="introduction"> wenjiangs is a leading search engine on free HTML tutorials. </p> 我们分别使用标签(tag)、类(c

  • 我有以下应用程序要求: 从RabbitMq接收消息,然后根据一些更复杂的规则进行聚合,例如基于属性(具有预先给定的类型时间映射)和基于消息在队列中等待的现有时间(属性) 正如您在图中看到的一个用例:三条消息已经聚合并等待下一秒发布(因为当前速率为),但就在那时,以到达,并更新了,使其成为优先级最高的第一条消息。因此,在下一个选项中,我们不再发布聚合3,而是发布聚合2,因为它现在具有更高的优先级。

  • 问题内容: CSS问题:如果两个不同的选择器应用于一个元素,谁会赢? 我知道这不应该发生,但是我想调整旧应用程序,而CSS居于中间。 问题答案: 规范中的实际上是合理可读的。综上所述: 规则和内联规则获胜。 否则,通常会赢得更具体的胜利。是比更加具体的选择器。 如果规则同样具体,则以最后宣布的为准。 没有特别的理由说明为什么这种“不应该发生”。通常先指定一个广泛适用的规则,然后添加一个更具体的规则

  • 本文向大家介绍CSS选择器有哪些,优先级呢?相关面试题,主要包含被问及CSS选择器有哪些,优先级呢?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: id 选择器,class 选择器,标签选择器,伪元素选择器,伪类选择器等 同一元素引用了多个样式时,排在后面的样式属性的优先级高; 样式选择器的类型不同时,优先级顺序为:id 选择器 > class 选择器 > 标签选择器; 标签之间存在层级包

  • 本文向大家介绍新手学习css优先级,包括了新手学习css优先级的使用技巧和注意事项,需要的朋友参考一下 css不是一种程序语言,而是一种描述语言。因此,可以说,css理解起来是非常容易的,大部分人通过简单的学习就可以懂得如何写css代码来定义网页的样式。但是,大部分人同样也会在写css的过程中产生很多困惑,比如为什么自己写的某段css没有生效,或者呈现出的样式和预计的不同,但又不知道要如何解决。