Question

两者之间有什么区别吗？

示例1：

a>b{
  display: block;
}

示例2：

a > b{
  display: block;
}

Answer 1

没有这样的差异。有关演示的信息，请参阅下面的代码：

＆＃13;

.a>.b{
  color: red;
}

.c > .d{
  color: red;
}

＆＃13;

<div class="a">
  Class a
  <div class="b">
    Class b
  </div>
</div>

<div class="c">
  Class c
  <div class="d">
    Class d
  </div>
</div>

＆＃13;

Answer 2

CSS非常宽容。 CSS选择器规范提到组合器周围的空白（如此处的>）是可选的：

以下选择器表示一个p元素，它是body的子元素：
body > p
以下示例结合了后代组合子和子组合子。
div ol>li p
它表示一个p元素，它是li元素的后代; li元素必须是ol元素的子元素; ol元素必须是div的后代。请注意“＆gt;”周围的可选空格组合器已被排除在外。

- Section 8.2 of the CSS Selectors Level 3 recommendation

为了进一步说明这一点，规范的 Grammar 部分通过实现方法使这一点变得非常明显：

combinator
  /* combinators can be surrounded by whitespace */
  : S+ | S* [ '>' | '+' | '~' | COLUMN | '/' IDENT '/' ] S*
  ;

- Section 10 of the CSS Selectors Level 3 recommendation

由于这个原因，以下内容都是有效的，因为CSS解析器应该简单地删除空格：

a>b {}
a > b {}
a> b {}
a >b {}
a     >    b {}

所以回答你的问题：不，没有区别。

至于你应该使用哪一个：然而：这纯粹是个人偏好的问题。对我来说，我选择a > b，只是因为我觉得它更容易阅读，但如果你想输入a>b甚至a > b，这完全取决于你 - 尽管任何必须阅读你的代码的人都可能不会成为后一种方法的第一粉丝！

Answer 3

首先，两者之间没有效果空间，两者都有效。

示例将使用以下DOM结构：

<a><b></b></a>

Answer 4

两者之间没有区别。

没有空格“a＆gt; b”和空间“a＆gt; b”的CSS子选择器有什么区别？

4 个答案: