#书摘 #css #前端
《CSS选择器世界（第2版）》 我是懒狗嘤嘤嘤
微信读书 23个笔记
◆ 第1章 概述
>> CSS选择器可以分为4种，即选择器、选择符、伪类和伪元素。
>> 这里的body就是一种选择器，属于类型选择器，也可以称为标签选择器。
>> 这里的.container也是选择器，属于属性选择器，我们平时称其为类选择器。
>> 目前我所知道的CSS选择器世界中的选择符有5种，即表示后代关系的空格（ ）、表示父子关系的箭头(>)、表示相邻兄弟关系的加号(+)、表示兄弟关系的波浪线(~)，以及表示列关系的双管道(||)。
>> 如今CSS选择器是有局部作用域的概念的。伪类:scope的设计初衷就是匹配局部作用域内的元素。
>> 实际上此特性曾被浏览器支持过，但只是昙花一现，现在已经被舍弃。目前虽然伪类:scope也能解析，但只能当作全局作用域。但是，这并不表示:scope一无是处，它在JavaScript中还是有效的
>> 上面的CSS选择器的局部作用域示例都配有演示页面，读者可以手动输入https://demo.cssworld.cn/selector2/1/2-1.php
>> CSS选择器中还有一个命名空间(namespace)的概念，这里简单介绍一下。命名空间可以让来自多个XML词汇表的元素的属性或样式彼此之间不产生冲突，它的使用非常常见，例如XHTML文档：<html xmlns="http://www.w3.org/1999/xhtml">又如SVG文件的命名空间：<svg xmlns="http://www.w3.org/2000/svg">上述代码中的xmlns属性值对应的URL地址就是一个简单的命名空间名称，并不指向实际的在线地址，浏览器不会使用或处理这个URL。
>> svg|a中有一个管道符|，管道符前面的字符表示命名空间的代称，管道符后面的内容则是选择器。
>> CSS选择器命名空间的兼容性很好，至少10年前浏览器就已支持，但是，很少见人在项目中使用它，这是为什么呢？原因有二。其一，在HTML中直接内联SVG的应用场景并不多，它更多的是作为独立的SVG资源使用，即使内联，也很少有需要对特性SVG标签进行样式控制的需求；其二，有其他更简单的替代方案
>> 当这些无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效。
>> :hover和:active是浏览器很早就支持的两个伪类，按道理讲，所有浏览器都能识别这两个伪类，但是，由于IE浏览器并不支持:focus-within伪类，导致IE浏览器无法识别整个语句，这就是无效CSS选择器特性。
◆ 第2章 CSS声明的优先级
>> 被继承的CSS声明的优先级一定位于整个CSS世界的底层。
>> 日常开发代码>@layer开发代码>插件注入代码>浏览器内置代码。
>> 先讲解一下设计@layer的初衷。
>> 这就会使我们的CSS代码变得很臃肿，维护成本上升，同时过于复杂的选择器也使CSS渲染的性能不是很好。
>> 而有了@layer规则，上面这些问题就迎刃而解了。我们只要将希望获得低优先级的CSS代码放在@layer规则中，就无须再担心选择器优先级过高的问题，因为@layer规则的级联层级比常规的CSS代码的级联层级低。
>> 其优先级低于.container和.some-button这两个类名，但是由于代码所在的级联层级更高，因此，还是重置了30px。
>> 这就是@layer规则的作用，可以让CSS代码的级联层级降低，从而确保主业务的CSS代码不受第三方组件的CSS代码的影响。
>> @layer {rules}语法在前文出现过，没有任何层级名，称为匿名级联层
>> 下面3种语法均需要自定义级联层的名称，称为命名级联层
>> 命名带规则语法
>> 此时，我们可以使用下面的单命名语法或者多命名语法来灵活调整不同级联层的优先级顺序。如果我们没有这样的需求，则可以直接使用匿名级联层语法。
《CSS选择器世界（第2版）》 我是懒狗嘤嘤嘤
微信读书 23个笔记
◆ 第1章 概述
>> CSS选择器可以分为4种，即选择器、选择符、伪类和伪元素。
>> 这里的body就是一种选择器，属于类型选择器，也可以称为标签选择器。
>> 这里的.container也是选择器，属于属性选择器，我们平时称其为类选择器。
>> 目前我所知道的CSS选择器世界中的选择符有5种，即表示后代关系的空格（ ）、表示父子关系的箭头(>)、表示相邻兄弟关系的加号(+)、表示兄弟关系的波浪线(~)，以及表示列关系的双管道(||)。
>> 如今CSS选择器是有局部作用域的概念的。伪类:scope的设计初衷就是匹配局部作用域内的元素。
>> 实际上此特性曾被浏览器支持过，但只是昙花一现，现在已经被舍弃。目前虽然伪类:scope也能解析，但只能当作全局作用域。但是，这并不表示:scope一无是处，它在JavaScript中还是有效的
>> 上面的CSS选择器的局部作用域示例都配有演示页面，读者可以手动输入https://demo.cssworld.cn/selector2/1/2-1.php
>> CSS选择器中还有一个命名空间(namespace)的概念，这里简单介绍一下。命名空间可以让来自多个XML词汇表的元素的属性或样式彼此之间不产生冲突，它的使用非常常见，例如XHTML文档：<html xmlns="http://www.w3.org/1999/xhtml">又如SVG文件的命名空间：<svg xmlns="http://www.w3.org/2000/svg">上述代码中的xmlns属性值对应的URL地址就是一个简单的命名空间名称，并不指向实际的在线地址，浏览器不会使用或处理这个URL。
>> svg|a中有一个管道符|，管道符前面的字符表示命名空间的代称，管道符后面的内容则是选择器。
>> CSS选择器命名空间的兼容性很好，至少10年前浏览器就已支持，但是，很少见人在项目中使用它，这是为什么呢？原因有二。其一，在HTML中直接内联SVG的应用场景并不多，它更多的是作为独立的SVG资源使用，即使内联，也很少有需要对特性SVG标签进行样式控制的需求；其二，有其他更简单的替代方案
>> 当这些无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效。
>> :hover和:active是浏览器很早就支持的两个伪类，按道理讲，所有浏览器都能识别这两个伪类，但是，由于IE浏览器并不支持:focus-within伪类，导致IE浏览器无法识别整个语句，这就是无效CSS选择器特性。
◆ 第2章 CSS声明的优先级
>> 被继承的CSS声明的优先级一定位于整个CSS世界的底层。
>> 日常开发代码>@layer开发代码>插件注入代码>浏览器内置代码。
>> 先讲解一下设计@layer的初衷。
>> 这就会使我们的CSS代码变得很臃肿，维护成本上升，同时过于复杂的选择器也使CSS渲染的性能不是很好。
>> 而有了@layer规则，上面这些问题就迎刃而解了。我们只要将希望获得低优先级的CSS代码放在@layer规则中，就无须再担心选择器优先级过高的问题，因为@layer规则的级联层级比常规的CSS代码的级联层级低。
>> 其优先级低于.container和.some-button这两个类名，但是由于代码所在的级联层级更高，因此，还是重置了30px。
>> 这就是@layer规则的作用，可以让CSS代码的级联层级降低，从而确保主业务的CSS代码不受第三方组件的CSS代码的影响。
>> @layer {rules}语法在前文出现过，没有任何层级名，称为匿名级联层
>> 下面3种语法均需要自定义级联层的名称，称为命名级联层
>> 命名带规则语法
>> 此时，我们可以使用下面的单命名语法或者多命名语法来灵活调整不同级联层的优先级顺序。如果我们没有这样的需求，则可以直接使用匿名级联层语法。
