按字母排序的CSS选择器：用途、起源及未包含元素疑问

嘿，我来一步步解答你的疑问～

一、为什么要使用这种按字母排序的CSS选择器？它起源于何处？ #

首先，这种写法其实是CSS样式归一化（Normalize） 的一种实现方式，最早是为了解决不同浏览器对HTML元素的默认样式差异问题——比如有的浏览器给<p>加了默认margin，有的给<ul>加了内边距，导致页面在不同浏览器里显示不一致。

至于按字母排序，纯粹是为了代码可读性和维护性：把所有要重置的元素按字母排好，后面要加新元素或者修改的时候，能快速找到对应的选择器，避免重复或者遗漏。

那为什么不用*选择器呢？原因有两个：

• 性能问题：*会匹配页面上的所有元素，包括那些你根本不需要重置的（比如<script>、<style>、<meta>这些不可见的头部元素），额外增加浏览器的渲染计算量。
• 不必要的覆盖：有些元素的默认样式其实是有用的，或者你不想去修改它们，用*会一刀切地改掉所有元素的样式，反而可能引入新的问题。

二、哪些元素不需要进行样式归一化？ #

你贴的这个选择器列表已经把大部分需要重置的可见元素都包含了，那些被排除在外的，大多是非可视化元素或者有特殊默认功能的元素，比如：

• <script>、<style>、<link>、<meta>、<title>：这些都是页面的功能性元素，不会在页面上显示，根本不需要重置样式。
• <input>、<button>、<select>、<textarea>：这类表单元素的默认样式（比如按钮的边框、输入框的内边距）其实和用户交互相关，直接重置可能会破坏原生的交互体验，通常会单独处理它们的样式，而不是和普通元素一起批量重置。
• <br>、<hr>：换行和水平线元素有自己的特殊功能，默认样式一般不需要重置，或者只需要针对性调整。
• <noscript>：只有在浏览器禁用JS时才会显示，通常也不需要加入全局重置。
• <template>：用于HTML模板，本身不会渲染到页面上，不需要样式重置。

简单来说，只有那些会在页面上显示、且默认样式在不同浏览器有差异的块级/行内元素，才会被放进这种批量重置的选择器里。

内容的提问来源于stack exchange，提问作者Qiulang