假设我有这样的设置：
<div class="dialog">
<div class="toolbar first">Bla</div>
<div class="toolbar">Yada</div>
</div>
并且这个样式定义：
.toolbar { background-color: red; }
我希望两个“工具栏”之间有一个小的2像素的边框，因此我认为有两种可能：
1）给“对话框”div添加背景颜色，并给第一个“工具栏”添加外边距：
.dialog { background-color: #fff }
.toolbar.first { margin-bottom: 2px; }
2) 给第一个工具栏添加一个2像素的边框：
.toolbar.first { border-bottom: 2px solid #fff }
在渲染/应用方面，成本是否有差异？哪种更可取？
我知道这只是一个非常小的例子，可能没有真正的区别，但想象一下一个页面有数十个这样的对话框。
多及时的问题！
我几天前读了一篇关于CSS性能的优秀文章。尽管与为整个页面提供服务所花费的精力相比，CSS选择器的性能非常微小，但仍需要牢记。
http://css-tricks.com/efficiently-rendering-css/
编辑
我没有注意到问题是关于CSS规则而不是选择器。现在尝试回答这个问题。
正如我在原始答案中所说，CSS性能是您的系统中可以获得最少性能提升的领域（通常情况下，除非您使用类似滤镜之类的东西），如果要微调您的网站，则应最后解决它。更好的方法是保持可读性并首先解决站点的其他部分。
我认为只有当元素数量达到数万个时，我们才会看到性能上的真正差异，否则它将保持在毫秒级别。
因此，我的建议是坚持使用最易读/简单的方法，这可能是将"直接"边框添加到第一个工具栏。 :)
我个人认为你的第二个选项是最好的，因为你要添加一个边框，所以使用 border ;) - 不过我会反过来，将边框添加到第二个工具栏上.. 想象一下如果你有超过两个工具栏，你实际上想要的是第二个和后续的工具栏有一个顶部边框，但第一个没有。
.toolbar { border-top: 2px solid #fff }
.toolbar.first { border: 0;}
.first 类的作用就是明确地覆盖其他内容。不知道使用哪个浏览器，以及如何实现CSS，元素如何呈现，这些因平台硬件而异的情况很难找出。今天可能很慢，明天就可能很快（反之亦然！）
唯一可以做出的假设是所有浏览器供应商希望他们的代码尽可能地快...
保持你的CSS可读性，一致性和易于维护比“性能”更重要。
回答你的问题，是的，有些操作比其他操作更昂贵，绝对是这样。
它们通常分为两类：
一般触发回流的样式示例：
不会触发回流的样式示例：