伪类的最佳语义

Question

我想知道已经有一个类的元素的最佳语义，然后用伪类改变样式。

案例是“a”元素。

a.btn {...}

  

a：hover.btn {...}或a.btn：hover {...}

哪一个是最好的做法？

Answer 1

考虑到选择器从右到左解析，你应该使用a.btn:hover只是因为事实（应该总是）只有一个项目一次悬停，使得选择器在初始时效率最高鉴定。选择悬停项后，会检查它是否具有类btn，然后是a。如果所有btn元素都是a，您只需.btn:hover即可获得更高的效率。

通过a:hover.btn，选择器首先识别具有类btn的所有元素，然后找到悬停的元素。

用CSS表示，CSS类和伪选择器具有相同的权重。因此，可实现的差异可以忽略不计，如果有的话。

就语义而言，在阅读CSS以获得a.btn:hover时通常更有意义 - 例如a类的btn元素悬停。另外，不要忘记元素和类是HTML的一部分，因此在扫描CSS时，它们会一起显示，从而使识别受影响的元素变得更容易。