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

正确使用选择器部分和部分的术语

司空朝
2023-03-14
问题内容

用逗号分隔 的CSS选择器部分的正确术语是什么?

    body.foo .login , body.bar .login { ... }
/*                  |
           Part 1   |  Part 2         */

在这些部分,什么是部分术语 通过组合子分隔 (空格,+>,等)?

    body.foo .login , ... { ... }
/*          |
   Part 1   |   Part 2    */

问题答案:

用逗号分隔 的CSS选择器部分的正确术语是什么?

这些称为复杂选择器 。整个逗号分隔的列表称为
选择器列表

在这些部分,什么是部分术语 通过组合子分隔 (空格,+>,等)?

这些被称为复合选择器

因此,选择器列表由一个或多个用逗号分隔的复杂选择器组成,每个复杂选择器都由两个主要部分组成:复合选择器和组合器。它还可以选择包含伪元素。

复合选择器曾经有个相当复杂的名称“简单选择器序列”。更糟糕的是,复杂的选择器仅被称为“选择器”。不用说,我建议使用新术语,因为与它们的前任相比,它们要简单得多,麻烦得多并且完全明确。

由于我在这里,所以这里是其余的定义…

  • 一个 简单的选择器选择器 的基本组成部分。它是以下任意一项:

    • 通用选择器(*),可以选择使用名称空间
    • 型选择器(adivspanulli,等),任选地与一个命名空间
    • 属性选择器([att][att=val]等),可以选择使用名称空间
    • 类选择器(.class
    • ID选择器(#id
    • 伪类(:pseudo-class
    • 如上所述, 复合选择器 (以前称为“简单选择器序列”)是不由组合器分隔的一连串简单选择器:

      a:not([rel=”external”]):hover

  • 一个 组合子 是选择的另一个基本组成部分。它是分隔两个复合选择器的符号或标记,在其位置上建立了由两个复合选择器表示的两个元素之间的关系。当前有四种组合器正在使用:

    • 后代组合器:

          article p
      
    • 子组合器:

          /*
      
      • The extra spaces in between are whitespace,
      • and are therefore insignificant.
        */
        ul > li

    • 相邻的同级组合器:

          header + section
      
    • 通用同级组合器:

          h2 ~ p
      

在以后的规范中可能会引入更多的组合器。

  • 而一个 复杂的选择 (以前只是“选择”)是由组合程序连接的化合物选择的由一个完整的字符串:

    nav[role="main"] > ul:first-child > li
    
  • 复杂选择器的 主题 是它的最后一个或唯一的复合选择器,代表将被匹配或设置样式的元素。在上面的示例中,选择器的主题为li

  • 选择器 一词已被概括,因此为了简洁起见,现在可以指代 以下任何 一项,并且在任何给定时刻所指的是上下文。

    • 简单选择器
    • 复合选择器
    • 复合选择器
    • 选择器列表(例如,样式规则的“选择器”组件)

一些个人注意事项:

  • 浏览器供应商创造了“键选择器”一词,用于选择器的实现,并非官方术语。但是,它经常用来表示“选择器的主题”,因为实现过程碰巧将选择器的主题用作确定匹配目的的键。

  • 术语“伪选择器”是由作者创造的,用于混合伪类和伪元素,它不是正式的或确实有意义的术语。尽管您可以在早期的W3C CSS2 / 3草案中找到它,但这可能是一个错误。请不要使用此术语,因为它会通过将两个完全不同的概念归为一个总括术语而不必要地造成混乱。

  • 伪元素(::pseudo-element)不是简单的选择器,因此不能出现在仅可以匹配实际元素的地方。但是,出于CSS解析的目的,它们仍被视为选择器,并且如上所述,当前它们可以出现在列表中任何复杂选择器的末尾(即,每个复杂选择器的最后一个或仅是复合选择器的末尾) 。

  • 在CSS中,典型的样式规则(以前称为“规则集”)由 选择器声明块组成

  • 命名空间前缀本身并不是选择器,但是它们可以应用于类型选择器,通用选择器和属性选择器,以匹配(或没有)命名空间的文档中的组件。

  • 选择器的特异性目前仅指单个复杂选择器的特异性。匹配规则时,将考虑列表中与给定元素匹配的任何复杂选择器,以进行特异性计算。如果有一个以上的复杂选择器与一个元素匹配,则最具体的一个将用于计算。

对于某些4级选择器(例如:is()和增强的:not(),以及of S增强的:nth- child()伪标记中的表示法),特异性将是一个更为复杂的问题。



 类似资料:
  • 问题内容: 我想知道是否有人可以帮助查询来选择列的一部分。 “ criteriadata”列包含的数据如下所示: 条件数据 14 27 15 C 14 30 15 DD 14 38 15通过 14 33 15通过 如何只选择数字15之后的数据。 非常感谢。 问题答案: SQL小提琴演示

  • 问题内容: 我的应用程序有很多选择器,里面有动态ID。当该动态ID位于选择器的末尾时,我将在每个选择器的内部使用。例如: 变成: 我工作得很好,但是我不知道如何处理这样的选择器: 其中0是动态数字,其他所有内容都是静态的。我正在尝试以下操作,但收到无效的选择器错误: 问题答案: 要标识具有动态元素,例如 #tab-t0-1 ,其中 0 是动态数字,其他所有元素都是静态的,则可以将 cssSelec

  • 问题内容: 我遇到了一个问题。我有这个mixin(这是尝试将更少的端口移植到sass): 显然这是行不通的:D我希望它生成如下内容: mixin在各种div类中被调用,因此不可能(轻松)使其变为静态。 Sass专业人士(或非专业人士,但比我聪明)是否有任何解决方法?感谢大家的关注和分享您的解决方案。 问题答案: 对于Sass 3.2和更早版本,这些是使用父选择器的所有有效方法: 从Sass 3.3

  • 我有SQL声明 关系为1-N:用户可能有许多文件。 这有效地选择了第二个10元素页面。 问题是这个查询限制/偏移了一个连接的表,但我想限制/偏移第一个(

  • 问题内容: 我有个问题。我有这样的元素: id = someGenerated的元素Some:Same:0:name id = someGenerated的元素Some:Same:0:surname id = someGenerated的元素Some:Same:1:name id = someGenerated的元素Some:Same:1:surname 我需要CSS选择器来获取名称。问题是我不知

  • 第七部分 正则化与模型选择 设想一个机器学习的问题,我们要从一系列不同的模型中进行挑选。例如,我们可能是用一个多项式回归模型 (polynomial regression model) $h_\theta (x)=g(\theta_0+\theta_1x+\theta_2x^2+\cdots+\theta_kx^k)$ 想要判定这里的多项式次数 $k$ 应该是多少,$0, 1, …, 或者10$。