CSS 选择器中的逗号是什么意思?
时,这意味着什么?
#A .B,
#A .C { some styles }
当我有这意味着类 B 没有样式定义
What does it mean when I have
#A .B,
#A .C { some styles }
Does it mean that class B has no style definitions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
这意味着
#A .B
和#A .C
共享相同的声明块。逗号表示将该块中的声明应用于这两个选择器,而逗号后面的换行符并不意味着任何特殊的意思;它只是用于提高样式表可读性的纯空白。
It means both
#A .B
and#A .C
share the same declaration block.The comma says to apply the declarations in that block to both of those selectors, while the line break after the comma doesn't mean anything special; it's just pure whitespace used to improve readability of the stylesheet.
这称为选择器分组。这将是一个快捷方式:
That's called selector grouping. It'd be a shortcut for:
我们来逐一剖析每个选择器:
首先,用逗号来分隔多个选择器;您可以将选择器合并在一起,而不是为每个选择器编写相同的样式规则(例如:为 #A .B 编写一次,为 #A .C 编写一次)。这意味着样式定义将在 #A .B 和 #A .C 规则上强制执行。
如果您也想知道,让我们也剖析一下 #A .B 选择器:
各个选择器之间的间距(在本例中为 #A 和 之间的间距。 B)代表后代关系,其中#A是祖先,.B是后代。 # 符号用于表示元素 ID,而 . 符号用于表示元素的类。这意味着上面的选择器定义用于查找具有类 B 的所有元素,该类是具有 ID A 的元素的后代(不一定是直接的)。
从更大的角度来看,由于逗号用于将两个选择器集合并在一起,因此完整的选择器定义将是:包含类 B 或 C 的所有元素ID 为 A 的元素的后代。
注意:如果 ID A 的元素还包含类 B 或 C,则样式定义不会在其上强制执行,因为它必须包括两个元素之间的后代关系(为此,您需要 #AB 或 #AC 选择器定义)。
希望这有帮助。
Let's dissect each selector individually:
First, the comma is used to separate multiple selectors; instead of writing the same style rules for each selector (ex.: once for #A .B and again for #A .C), you can merge the selectors together. This means that the styling definition will be enforced on both #A .B and #A .C rules.
In case you were wondering as well, let's also dissect the #A .B selector:
The spacing between individual selectors (in this case, between #A and .B) represents a descendent relationship, where #A is the ancestor and .B is the descendent. The # symbol is used to represent an element ID where as the . symbol is used to repesent an element's class. This means that the above selector definition is used to find all elements with a class B that is a descendent (not necessarily directly) of the element with an ID A.
In the bigger picture, as the comma is used to merge two selectors sets together, the full selector definition would be: All elements that contain a class B or C that is also a descendent of the element with ID A.
Note: if the element of ID A also contains the class B or C, the styling definition will not be enforced on it, as it must include a descendant relationship between two elements(for this, you would need the selector definition of #A.B or #A.C).
Hope this helps.
这意味着相同的定义适用于匹配 B 类和 C 类的 DOM 元素。
It means that the same definitions apply for both - DOM elements that match class B and class C.