Question

我们有一个像这样的HTML;

<div class="mainElement">
  <div class="subElement1">...</div>
  <div class="subElement2">...</div>
  <div class="subElement3">...</div>
</div>

因此，如果想要将'subElement1'设置为哪一个更加标准或更快。

.mainElement > .subElement1{
  /*some CSS here..*/
}

.mainElement .subElement1{
  /*some CSS here..*/
}

.mainElement > div:first-child{
  /*some CSS here..*/
}

Answer 1

从你拥有的，最好的是：

.mainElement > .subElement1{
  /*some CSS here..*/
}

因为它的目标直接来自父类。

但如果你真的想要表现，你想直接定位课程：

.subElement1{
  /*some CSS here..*/
}

或者如果您想要更快的代码，请使用ID：

#subElement1{
  /*some CSS here..*/
}

对于浏览器来说，ID通常更快，因为它们应该每个元素只使用一次。

浏览器从右到左读取CSS，因此除非您确实需要，否则添加父类/ id只会减慢您的代码速度。

Answer 2

为什么不只是.subelement1？

如果没有理由嵌套你的选择器，最好不要将它们嵌套/耦合在一起。

但是对于你的问题，这实际上取决于你要做的事情，你发布的选项都做了不同的事情。

第一个是快速且具体的，但只选择.mainElement

的直接后代

第二个选项选择.subelement1范围内的所有.mainElement类，它们现在只有一个元素，但你可以将它们嵌套在彼此之内，它们都会得到相同的样式而不仅仅是直系后裔。

至于最后一个，它是最具体的，可能会让你遇到麻烦，它发现div内.mainElement first-child span这可能会导致麻烦，如果你要改变标记并说使用div而不是volatile s也只有第一个孩子总是会得到那个造型，无论你给它什么课。

Answer 3

.subElement就足够了，你不应该首先访问父类，因为它会影响文件大小（相当小的大小）并使css加载文件变慢。希望此链接可以帮助您Writing efficient CSS

推荐的CSS样式指南

3 个答案: