本文创建于2018-12-24，移至2019-12-20本文根据CSS2.1规范中文版整理。用浏览器Chrome70测试。前言里可能有人会说，都2019年了，怎么还看CSS2.1规范。一方面，最新的CSS（核心）规范是CSS2.2（下面截图来自https://www.w3.org/TR/CSS/），又因为CSS2.1有中文版，而且它兼容CSS2.2规范并没有太大区别，出于偷懒的目的我最终还是选择了阅读CSS2.1规范。记得面试的时候，面试官说“你的JavaScript比大多数人好很多，但是你的CSS还需要加强”。今年6月毕业后，我正式成为一名前端工程师，阅读CSS规范也因此进入了我今年的TODO清单。前后用了两个月的零散时间，上周终于看完了，对CSS的理解也稍微系统和全面了一些。在自己阅读的过程中，有些人觉得大家容易被忽略，但本身可能会用到或者有趣，所以我以此为主题，在此基础上适当展开，整理出一篇文章与大家分享.分享。喝杯咖啡，让我们回顾一下规范中那些可能没有引起您注意的地方。阅读愉快，请指教。关键字、属性和标识符以-或_开头的关键字和属性名称保留用于特定于供应商的扩展。CSS中的标识符只能包含字符[a-zA-Z0-9]、U+00A0及ISO10646字符中的后续字符，以及-和_，不能以1个数字、2个连字符开头，也不能以数字开头连字符.这也意味着选择器可以是中文的（虽然不推荐）。....这是一个中文选择器文本。
此时，
标签内的文字会变成红色。@import用户代理必须忽略所有出现在块内的@import规则，或者在除@charset和@import规则之外的任何不可忽略的语句之后。这也意味着@import规则必须先于除@charset和其他@import规则之外的所有规则。@import"subs.css"h1{颜色：蓝色；}@import"list.css"在上面的代码中，第二条@import语句是非法的，解析器会忽略这条规则。另外@import规则可以加上一个媒体查询类型，也就是说只有满足某种媒体类型才引入样式表。@import"landscape.css"screenand(orientation:landscape)encoding和@charset当一个样式表嵌入到其他文档中时，比如HTML中的style元素或style属性，样式表会共享整个的字符编码文档。如果样式表在单独的文件中，则样式表的字符编码按照以下顺序（优先级从高到低）确定：HTTP协议的Content-type字段中charest参数文件的BOM编码或@charset或来自链接机制的其他元数据假定导入的样式表或文档的字符集为UTF-8。使用@charset规则的编写者必须将此规则放在样式表的开头，前面不允许有任何字符。.用户代理必须忽略任何不以样式表开头的@charset规则。:first-letter伪元素：first-letter伪元素选择块（第一个格式化行块）第一行的第一个字母（或数字），如果行中没有其他内容在它之前（例如图片或内联表）。表格单元格或行内块元素的首字母不能用作祖先元素的首字母。“一些文字”
一些文字sometext实际效果如图：:before和:after伪元素:before和:after伪元素将是从文档树中它们所附加的元素中检索继承所有可继承的属性。对于不可继承的元素，将采用其初始值。用法示例：p{颜色：红色；显示：块；}p:before{内容：'T';}如上例，此时，:before伪元素会变成红色。由于display属性是不可继承的，因此它将采用内联的初始值。扩展：伪元素单冒号和双冒号CSS3选择器草案区分伪元素和伪类（CSS-SelectorsLevel4），伪类仍然以引号开头，伪元素以两个引号开头.对于CSS1和CSS2中的:before、:after、:first-line和:first-letter伪元素，用户代理必须同时支持单引号和双引号形式。对于其他新引入的伪类，用户代理将不支持其单引号形式。在选择器和级联选择器中，文档语言元素名称的大小写敏感性取决于文档语言，例如，元素名称在HTML中不区分大小写，但元素名称在XML中区分大小写。级联样式表可能来自3个不同的来源：作者、用户和用户代理（例如浏览器）。为了找到元素或属性组合的值，用户代理必须按以下顺序排序：找到目标媒体类型，所有适用于元素和目标属性的声明，按@important规则和源排序，优先级从低到高依次为：useragentdeclarationusergeneraldeclarationwritergeneraldeclarationwriterimportantdeclaration具有相同重要性和来源的userimportantdeclaration规则按照选择器的特异性排序，更具体的选择器会被加权写在general上。伪元素和伪类分别算作常规元素和类最后，按照指定的顺序排序：如果两个声明的权重、来源和特异性相同，则指定后的生效。@import引入的样式表中的声明被认为是在样式表本身的所有声明之前评估选择器特异性（a-b-c-d）。选择器(a-b-c-d)的特殊性根据以下规则进行评估（a到d按降序加权）：如果声明来自样式属性而不是选择器样式规则，则计为1，否则为0(=a)计算选择器中ID属性的数量(=b)计算选择器中其他属性和伪类的数量(=c)计算选择器中元素名称和伪元素的数量(=d)*{}/*a=0,b=0,c=0,d=0*/li{}/*a=0,b=0,c=0,d=1*/.description{}/*a=0,b=0,c=1,d=0*/*[rel=up]{}/*a=0,b=0,c=1,d=0*/#element{}/*a=0,b=1,c=0,d=0*/style=""/*a=1,b=0,c=0,d=0*/即虽然#p123选择了与[id相同的对象=p123],ID选择器比属性选择器有更高的特异性。补充之前看了一些博客，在提到级联的特殊性时，用1000、100、10、1的权重来描述上面a-b-c-d的计算方式。其实这是不准确的。我们可以通过简单的实验推翻上述说法。下面的例子中，我们定义了一个类名为0的div，里面嵌套了十层div，最内层指定id为last。按照10倍递增算法，一个类嵌套十一层的特异性为110，使用一个id的特异性为100，背景为黑色。如果按照a-b-c-d算法，使用前者的特异性为0-0-11-0，后者的特异性为0-1-0-0，背景会呈现红色。观察连续使用十一个classes和一个id的性能就可以得出一个结论。 