选择器部分和部分的正确术语和单词

2022-01-10 00:00:00 css-selectors terminology css

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

What is the correct term for the sections of CSS selectors that are separated by commas?

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

在这些部分中，由组合符分隔的部分(空格、+、> 等)的术语是什么?

Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?

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

推荐答案

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

What is the correct term for the sections of CSS selectors that are separated by commas?

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

在这些部分中，由组合符分隔的部分(空格、+、> 等)的术语是什么?

Within those sections, what is the term for the parts separated by combinators (spaces, +, >, etc)?

这些被称为 复合选择器.

These are known as compound selectors.

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

So, a selector-list is made up of one or more complex selectors separated by commas, and each complex selector is made up of two main parts: compound selectors, and combinators. It can also optionally contain pseudo-elements.

复合选择器曾经有一个相当复杂的名称简单选择器序列".更糟糕的是，复杂的选择器只是被称为选择器".不用说，我建议使用新术语，因为与它们的前辈相比，它们更直接、更简洁且完全不含糊.

Compound selectors used to have the rather convoluted name "sequence of simple selectors". Worse still, complex selectors were just called "selectors". Needless to say, I recommend using the new terms as they are much more straightforward, much less cumbersome and completely unambiguous compared to their predecessors.

既然我在这里，这里是其余的定义......

And since I'm here, here are the rest of the definitions...

  • 简单的选择器是选择器的基本组成部分.它是以下任何一种:

  • A simple selector is one fundamental component of selectors. It is any one of the following:

  • 通用选择器 (*)，可选地带有命名空间
  • 类型选择器(a、div、span、ul、li等)，可选地使用命名空间
  • 属性选择器([att]、[att=val] 等)、可选的命名空间
  • 类选择器(.class)
  • ID 选择器 (#id)
  • 伪类(:伪类)
  • Universal selector (*), optionally with a namespace
  • Type selector (a, div, span, ul, li, etc), optionally with a namespace
  • Attribute selector ([att], [att=val], etc), optionally with a namespace
  • Class selector (.class)
  • ID selector (#id)
  • Pseudo-class (:pseudo-class)

如上所述，复合选择器(以前称为简单选择器序列")是不由组合器分隔的简单选择器链:

As answered above, a compound selector (formerly a "sequence of simple selectors") is a chain of simple selectors not separated by a combinator:

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

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

  • A combinator is another fundamental component of selectors. It is a symbol or token that separates two compound selectors, establishing in its place a relationship between the two elements represented by the two compound selectors. There are currently four combinators in use today:

    • 后代组合子:

    • Descendant combinator:

    article p

  • 子组合子:

  • Child combinator:

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

  • 相邻兄弟组合子:

  • Adjacent sibling combinator:

    header + section

  • 通用兄弟组合子:

  • General sibling combinator:

    h2 ~ p

    • 更多的组合子可能会在以后的规范中引入.

    More combinators may be introduced in later specifications.

    而复合选择器(以前只是选择器")是由组合器链接的复合选择器组成的完整字符串:

    And a complex selector (formerly just "selector") is a complete string made up of compound selectors linked by combinators:

    nav[role="main"] > ul:first-child > li

  • 复合选择器的主题是它的最后一个或唯一的复合选择器，表示将被匹配或设置样式的元素.在上面的例子中，选择器的主题是 li.

  • The subject of a complex selector is its last, or only, compound selector, representing the element that will be matched or styled. In the above example, the subject of the selector is li.

    术语 selector 已被概括，因此为了简单明了，它现在可以指代以下任何一个，以及它指的是哪个to 在任何给定时刻都应该从上下文中收集:

    The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity, and which one it's referring to at any given moment should be gleaned from context:

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

    一些个人笔记:

    • 术语键选择器"是浏览器供应商创造的，用于选择器实现，并不是一个官方术语.然而，它通常用于表示选择器的主题"，因为实现碰巧使用选择器的主题作为确定匹配的关键.

    • The term "key selector" was coined by browser vendors for use with selector implementations, and is not an official term. It is often used to mean "subject of the selector" however, because implementations happen to use the subject of the selector as the key for the purposes of determining matches.

    pseudo-selector"这个词是作者为了混合伪类和伪元素而创造的，它不是一个官方的，也不是真正有意义的术语.尽管您可以在一些早期的 W3C CSS2/3 草案中找到它，但这可能是一个错误.请不要使用这个词，因为它不必要地创建试图将两个完全不同的概念归为一个总称来混淆.

    The term "pseudo-selector" was coined by authors to mix pseudo-classes and pseudo-elements, and is not an official, or indeed meaningful, term. Although you can find it in some early-stage W3C CSS2/3 drafts, that was probably a mistake. Please don't use this term, as it needlessly creates confusion by attempting to group two completely different concepts into a single umbrella term.

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

    Pseudo-elements (::pseudo-element) are not simple selectors, and therefore cannot appear in places where only actual elements may be matched. However, they are still considered selectors for the purposes of CSS parsing, and as stated above currently can appear at the end of any complex selector in a list (i.e. at the end of the last, or only, compound selector of each complex selector).

    在 CSS 中，一个典型的样式规则(以前称为规则集")由一个选择器和一个声明块组成.

    In CSS, a typical style rule (formerly "ruleset") consists of a selector and a declaration block.

    命名空间前缀本身不是选择器，但它们可以应用于类型选择器、通用选择器和属性选择器，以匹配文档中已(或未)命名空间的组件.

    Namespace prefixes are not selectors in their own right, but they may be applied to type selectors, universal selectors and attribute selectors to match components in a document that are (or are not) namespaced.

    选择器的特异性目前仅指一个复杂的选择器.匹配规则时，列表中与给定元素匹配的任何复杂选择器都将被考虑用于特异性计算.如果多个复杂选择器与一个元素匹配，则将使用最具体的选择器进行计算.

    The specificity of a selector currently only refers to that of a single complex selector. When matching rules, any of the complex selectors in a list that match a given element will be considered for specificity calculations. If more than one complex selector matches an element, the most specific one will be used for calculations.

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

    Specificity will be a more complicated issue with some level 4 selectors, such as :is() and the enhanced :not(), and the of S notation in the enhanced :nth-child() pseudo.

    • 相关文章