在CSS中使用子选择器(>)有问题吗？

Question

我不确定我是否没记错，但我想我读过一次，在css规则中使用>选择器是不好的做法？有人能解释一下这个话题吗？

例如：

<style>
#search-form {
 ... whatever rules...
}
#search-form > input[type=text] {
 ... rules...
}
#search-form > button {
 ... rules ...
}
</style>
<form id="search-form">
    <input type="text" placeholder="Search...">
    <button>Search!</button>
</form>

Answer 1

这当然不是一个糟糕的实践，但应该在使用时了解其优点和缺点。使用子选择器(E > F)将仅选择直接的子项，并且由于这会阻止完整的子项遍历，因此浏览器应用子项选择器(E F)所需的时间更短。但是，该元素在IE6中不受支持，因此如果这对您很重要，请避开它。

这篇文章写得很好，还有一些不错的链接：CSS child vs descendent selector

Answer 2

IE6中不支持>选择器，因此如果您需要支持旧浏览器，则不能使用它。

http://caniuse.com/#feat=css-sel2

除此之外，没有理由不使用它。

Answer 3

子选择器只匹配左侧选择器的直系子选择器。它可能是您想要的样式，也可能不是您想要的样式，但将某种样式应用于所有后代，无论它们位于左侧选择器的下面有多深，都是更常见的。

例如，使用#mydiv > span问自己:我真的不想在#mydiv下的p中匹配span吗？在#mydiv中的li中的span又如何呢？等。也许你没有--也许你有。重要的部分是understand what it does。