我们可以优化CSS悬停属性吗？

Question

基于以下代码：

#my-product .description {display: block;}
#my-product .description .complement {display: none;}

#my-product .description:hover .complement {display: block;text-decoration: underline;font-size: 17px;}
#my-product .description:hover .complement img {display: block;border: 1px solid #cccccc;}
#my-product .description:hover .complement hr {display: block;border: 1px solid #cccccc;}

悬停部分中的声明样式是否对性能有影响，或者我们应该像这样声明它：

#my-product .description {display: block;}
#my-product .description .complement {display: none;text-decoration: underline;font-size: 17px;}
#my-product .description .complement img {display: block;border: 1px solid #cccccc;}
#my-product .description .complement hr {display: block;border: 1px solid #cccccc;}

#my-product .description:hover .complement {display: block;}

我不是在询问代码可读性，而只是询问浏览器性能。

编辑澄清我的问题：

在第一个示例中，浏览器必须完全重建用户在描述上每个悬停时以.description:hover为前缀的每个元素吗？或者他只会处理display: none和display: block？

如果他需要完全重建description元素，那么声明:hover之外的其他样式会优化这个过程吗？

这个问题不是关于选择器优化，而是关于渲染性能。