为什么绝大部分CSS都用class选择器，而不直接用element 选择器?

Question

在设计稿具有大量全局样式时，感觉直接使用element选择器写css更具有可读性（而且h5提供了很多新的语义化的标签）

为啥绝大部分css（无论设计稿有无大量全局样式）都还是自己另外声明标签的class属性再写呢？

是出于什么样的考虑？

Answer 1

肯定是为了实现更精细化控制啊。你一个页面可能有很多span标签，外观能一样吗？
另外，类的优先级比标签高，而且选择子里的类越多，优先级越高，通过不同的优先级可以实现很多的重用和覆盖，实现更精细的控制

Answer 2

因为标签选择器的性能要比类选择器慢一点。

但是也就那么一点点。所以我觉得不值得为了这么一点点性能牺牲代码的可读性。

Answer 3

一、选择器的效率

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器

二、选择器性能优化

1. 网站编写CSS时，应该优先考虑使用class选择器，避免使用通配符选择器（*）和属性选择器（a[rel=”external”]），后代选择器与标签选择器结合使用也应避免。
2. 使用id选择器的性能最好，但是编写时要注意其唯一性，谨慎使用。
3. CSS3选择器（例如：:nth-child(n)第n个孩子）在帮助我们锁定我们想要的元素的同时保持标记的干净和语义化，但事实是，这些花哨的选择器让更多的浏览器资源被密集使用。如果你关心页面性能的话，他们真不该被使用！

Answer 4

曾经有这样一种说法：在你开发完网页之后，会进行SEO优化，这时，某些对浏览器检索不友好的标签，比如你把标题用p标签包裹，这个时候就应该换成有意义的h标签，如果你是用标签选择器的话，就需要把对应的样式也换成h，很麻烦，但是，用类选择器就可以避免这个问题。

还有一点，标签选择器容易造成样式覆盖，所以，还是老老实实用类选择器吧?

Answer 5

同一个样式可以适用于多个标签，用class选择器可以共用，class名称可以自定义，但是element是有数的，例如定义一个class，可以将共用的属性写在同一个class里，这样需要这个样式的element都可以调用这个class，但是如果你定义一个div的样式，但是不是所有的div样式都一样的