CSS“>"与> &quot ;? [英] CSS ">" vs " > "?

问题描述

在CSS中，.a > .b与.a>.b相同，但是这两个中哪一个是更正确的表示法?我看到在Chrome开发人员工具中使用了第二种变体

In CSS .a > .b is the same as .a>.b, but which of this two is the more correct notation? I see that in Chrome developer tools the 2nd variant is used

推荐答案

更正确"都不是；两者同等有效. 规范唯一说的是，组合符周围的空白是可选的(强调我的):

Neither is "more correct"; both are equally valid. The only thing that the spec says is that whitespace surrounding combinators is optional (emphasis mine):

组合符是:空格，大于号" (U + 003E，>)，加号" (U + 002B，+)和波浪号"表示(U + 007E，~). 空白可能出现在组合器和围绕它的简单选择器之间. (U + 0020)，标签" (U + 0009)，换行" (U + 000A)，回车" (U + 000D)和换页" (U + 000C)可能出现在空格中.其他类似空格的字符，例如"em-space"， (U + 2003)和表意空间" (U + 3000)，绝不是空白.

Combinators are: whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.

请注意，后代组合器本身由空格字符表示；如果围绕两个复合选择器的唯一字符是空格字符，则将它们视为后代组合器.在您的示例中，子组合器>可以被空白包围，也可以不被空白包围；没有区别.

Note that the descendant combinator itself is represented by a space character; if the only characters surrounding two compound selectors are whitespace characters then they are treated as a descendant combinator. In your example, the child combinator > can either be surrounded by whitespace, or not; there is no difference.

您可以在规范本身中看到空白和无空白语法的示例，巧合地是

You can see an example of both whitespace and whitespace-less syntaxes in the spec itself, coincidentally also in the section describing the child combinator >. Notice, again with emphasis mine, that the spec even mentions explicitly where whitespace has been omitted, to demonstrate that it is in fact completely optional:

示例:

以下选择器代表p元素的p元素:

The following selector represents a p element that is child of body:

body > p

以下示例结合了后代组合器和子组合器.

The following example combines descendant combinators and child combinators.

div ol>li p

它表示p元素，它是li元素的后代； li元素必须是ol元素的子元素； ol元素必须是div的后代. 请注意，"周围的可选空白是组合器已被排除在外.

It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the ">" combinator has been left out.

正如其他人所提到的那样，当编写 CSS时，出于可读性考虑，最好使用空格；如果需要考虑文件大小，请考虑在后期制作过程中缩小和/或压缩样式表(缩小通常会为您去除不重要的空格，其中可能包括组合器周围的空格).在编写CSS时，您选择不使用空格的唯一原因是编码风格，即使在皱眉的情况下，这在技术上仍然有效.

As mentioned by others, when writing CSS, whitespace is good to have for readability purposes; if file size is a concern, consider minifying and/or compressing your stylesheet during post-production (minifying typically strips non-significant whitespace out for you, which can include whitespace around combinators). The only reason you would choose not to use whitespace when authoring CSS is a matter of coding style, and that is still technically valid, even if frowned upon.

这篇关于CSS“>"与> &quot ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！