我有以下 2 个 css 选择器：

.foo {
cursor: pointer;
}
.foo:hover {
cursor:pointer;
}

它们都具有相同的功能(我猜(，但它们之间有什么性能差异吗？哪一个用起来更"优雅"？

Mozilla 开发者网络 - 文档

上面链接的文档指出了:hover伪类的许多不优雅的问题。

注意：:hover伪类在触摸屏上存在主要问题。根据浏览器的不同，：hover 伪类可能永远不会匹配，仅在触摸元素后匹配片刻，或者即使在用户停止触摸并直到用户触摸另一个元素后继续匹配。Web 开发人员应确保内容可在悬停功能有限或不存在的设备上访问。

和：

在

IE8-11 中，将鼠标悬停在元素上，然后在不移动指针的情况下向上/向下滚动将使元素处于:hover状态，直到指针移动为止。请参阅 IE 错误926665。

和：

在IE9(可能更早(中，如果一个<table>有一个具有非自动width和overflow-x: auto;的父级，并且<table>有足够的内容水平溢出其父级，并且表中的元素设置了:hover样式，则悬停在所述元素上将导致<table>的height增加。

和：

从 iOS 7.1.2 版 Safari Mobile 开始，点击可点击元素会导致该元素进入:hover状态。该元素将保持:hover状态，直到其他元素进入:hover状态。

而且，根据 sitepoint.com：

。用户可以通过激活:hover效果来触发回流...

虽然，谷歌关于最小化浏览器回流的开发者文章没有明确提到:hover，但它确实指出：

有时，重排文档中的单个元素可能需要重排其父元素以及其后的任何元素。

并：

最小化 CSS 规则

，并删除未使用的 CSS 规则。
如果您进行复杂的渲染更改(如动画(，请在流程之外执行此操作。
避免不必要的复杂CSS选择器...

我的(受过一定教育的(意见

如果您不需要它，请不要包含它。

是一样的。只是不要在hover state和normal state中使用两次，这是没有用的。