CSS">"vs">"？

Question

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

Answer 1

两者都不"更正确"; 两者都同样有效.该规范唯一指出的是围绕组合器的空白是可选的(强调我的):

组合符是:空格,"大于号"(U + 003E,>),"加号"(U + 002B,+)和"波浪号"(U + 007E,~).组合器与其周围的简单选择器之间可能出现空白区域.只有字符"空格"(U + 0020),"标签"(U + 0009),"换行"(U + 000A),"回车"(U + 000D)和"换页"(U + 000C) )可以在空白区域内发生.其他类似空间的字符,例如"em-space"(U + 2003)和"表意空间"(U + 3000),从不是空白的一部分.

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

您可以在规范本身中看到空格和无空格语法的示例,巧合的是在描述子组合子的部分中也是如此>.请注意,再次强调我的,规范甚至明确提到省略了空格,以证明它实际上是完全可选的:

例子:

以下选择器表示以下p子元素body:

body > p

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

div ol>li p

它代表一个p元素,它是元素的后代li; 该li元素必须是的子ol元素; 该ol元素必须的后裔div.请注意,">"组合器周围的可选空白区域已被忽略.

正如其他人所提到的,在编写 CSS时,为了可读性目的,空白是很好的; 如果文件大小是一个问题,请考虑在后期制作期间缩小和/或压缩样式表(缩小通常会为您排除非重要的空格,其中可能包括组合器周围的空白).在创作CSS时你选择不使用空格的唯一原因是编码风格问题,这在技术上仍然有效,即使不赞成.

Answer 2

第一个是为了可读性而优先考虑的，但这不是必需的，除了第二个中需要读取的字符较少这一事实之外，编译器并不关心。

我可以向你保证，所有人都更喜欢第一个版本，因为它使我们的工作变得更加容易，而计算机更喜欢第二个版本，但只是稍微喜欢一点。如果您仅在部署到实时站点时缩小 CSS，我建议仅使用第二个选项，因为这样做将为所有使用它的开发人员节省时间