logo标签列表

CSS ">"和">"有什么区别？

csssyntaxcss-selectorswhitespace
7
在CSS中，.a > .b与.a>.b是相同的，但这两种表示法哪一种更正确呢？我看在Chrome开发者工具中使用了第二种变体。
4个回答
10
"更正确"这种说法是不存在的，两种写法都是正确的。唯一需要注意的是，spec 规定组合符周围的空格是可选的（重点在于这里）：
引用原文： “组合符包括：空格、大于号（U+003E，>）、加号（U+002B，+）和波浪号（U+007E，~）。组合符与其周围的简单选择器之间可以有空白。空白只能由“空格”（U+0020）、“制表符”（U+0009）、“换行符”（U+000A）、“回车符”（U+000D）和“换页符”（U+000C）构成。其他类似空格的字符，如“全角空格”（U+2003）和“表意文字空格”（U+3000），永远不属于空白。”
请注意，后代组合器本身由空格表示；如果仅围绕两个复合选择器的字符是空格字符，则它们将被视为后代组合器。在您的示例中，子级组合器>可以被空格包围，也可以没有区别。
您可以在规范本身中看到两种语法，有空格和无空格的语法，巧合的是，在描述子级组合器>的部分也是如此。再次强调，规范甚至明确提到省略空格的位置，以证明它完全是可选的：

Examples:

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

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的唯一原因是编码风格的问题，即使这被认为是不好的，但从技术上讲仍然是有效的。
4
第一种写法更易读，但并非必须，编译器只关心第二种方式减少了需要读取的字符数。我可以向您保证，所有人类都喜欢第一种版本，因为它使我们的工作更容易，而计算机更喜欢第二种方式，但仅略微如此。如果仅在部署到实际网站时压缩CSS，则建议仅使用第二个选项，这样将节省所有开发人员的时间。
3
第二种表示法的唯一好处是通过删除冗余的空格，节省了几个字节。通常这也是压缩CSS后的最终结果。
3
基本上，如果你希望你的代码易于阅读，则使用以下方式：
.a > .b

然而，如果你希望样式表加载的更快（虽然速度提升不会很明显），你可以尝试使用以下代码：

.a>.b
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接