呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
《CSS 选择器世界》2.4.2 CSS选择器优先级的计算规则
对于CSS选择器优先级的计算，业界流传甚广的是数值计算法。具体如下：每一段CSS语句的选择器都可以对应一个具体的优先级数值，数值越大优先级越高，其中的CSS语句将被优先渲染。
其中，出现一个0级选择器，优先级数值+0；
出现一个1级选择器，优先级数值+1；
出现一个2级选择器，优先级数值+10；
出现一个3级选择器，优先级数值+100。
当CSS选择器的优先级数值相等的时候，后渲染的选择器的优先级更高。（后来居上）
后渲染的选择器优先级更高的规则是对整个页面文档而言的，而不仅仅是在一个单独的CSS文件中适用
2.对数值计算法的点评
上面提到的CSS选择器优先级数值计算法实际上是一个不严谨的方法，例如由于1和10之间的差距过小导致连续10个标签选择器的优先级和1个类选择器的优先级相当。然而事实并非如此，不同选择器优先级等级的差距是无法跨越的。但由于在实际开发中不会连续出现多达10个选择器，因此不会影响我们在实际开发过程中计算选择器优先级数值。
而且对于使用CSS选择器，书写习惯远比知识重要，就算理论知识再扎实，如果平时书写习惯糟糕，也无法避免CSS样式覆盖问题、样式冲突等问题的出现。我们将在第3章中深入探讨这个问题。
因此，对于数值计算法，我的态度是学一遍即可，没有必要深究，只要你书写习惯足够好，就不会遇到各种优先级问题。（正确的，合理的）
#书摘 #css #前端
《CSS 选择器世界》2.4 CSS选择器的优先级
本节介绍每一个级联层中的CSS属性的优先级，这主要是由CSS选择器的优先级决定的。
2.4.1 同等级CSS优先级规则概览
每一个级联层中的CSS优先级也有明显的不可跨越的等级，我们将其划分为0～4共5个等级，其中前4个等级由CSS选择器决定，最后一个等级由书写形式决定。下面对这5个等级分别进行讲解。
（1）0级：通配选择器、选择符和逻辑组合伪类。其中，通配选择器写作星号(*)。示例如下：
- 选择符指空格、>、+、~和||。关于选择符的更多知识参见第5章。
- 逻辑组合伪类有:not()、:is()和:where()等，这些伪类本身并不影响CSS优先级，影响优先级的是括号内的选择器（:where()比较特殊，括号内参数的优先级永远是0）。示例如下：
为0～4共5个等级，其中前4个等级由CSS
需要注意的是，只有逻辑组合伪类的优先级是0级，其他伪类的优先级并非如此。
（2） 1级：标签选择器。示例如下：
（3） 2级：类选择器、属性选择器和伪类。示例如下：
（4） 3级：ID选择器。示例如下：
（5） 4级：style属性内联。示例如下：
其中，style属性内联具有高优先级很好理解，而前面0～3级的选择器部分相对复杂得多，也重要得多，因为前端通常所说的CSS优先级其实指的就是CSS选择器的优先级。甚至可以说，掌握了CSS选择器的优先级等同于掌握了完整的CSS优先级规则。
《CSS 选择器世界》2.4 CSS选择器的优先级
本节介绍每一个级联层中的CSS属性的优先级，这主要是由CSS选择器的优先级决定的。
2.4.1 同等级CSS优先级规则概览
每一个级联层中的CSS优先级也有明显的不可跨越的等级，我们将其划分为0～4共5个等级，其中前4个等级由CSS选择器决定，最后一个等级由书写形式决定。下面对这5个等级分别进行讲解。
（1）0级：通配选择器、选择符和逻辑组合伪类。其中，通配选择器写作星号(*)。示例如下：
* { color: #000; }
- 选择符指空格、>、+、~和||。关于选择符的更多知识参见第5章。
- 逻辑组合伪类有:not()、:is()和:where()等，这些伪类本身并不影响CSS优先级，影响优先级的是括号内的选择器（:where()比较特殊，括号内参数的优先级永远是0）。示例如下：
为0～4共5个等级，其中前4个等级由CSS
需要注意的是，只有逻辑组合伪类的优先级是0级，其他伪类的优先级并非如此。
（2） 1级：标签选择器。示例如下：
body { color: #333; }
（3） 2级：类选择器、属性选择器和伪类。示例如下：
.foo { color: #666; }
[foo] { color: #666; }
:hover { color: #333; }
（4） 3级：ID选择器。示例如下：
#foo { color: #999; }
（5） 4级：style属性内联。示例如下：
<span style="color: #ccc;">优先级</span>
其中，style属性内联具有高优先级很好理解，而前面0～3级的选择器部分相对复杂得多，也重要得多，因为前端通常所说的CSS优先级其实指的就是CSS选择器的优先级。甚至可以说，掌握了CSS选择器的优先级等同于掌握了完整的CSS优先级规则。
#书摘 #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种语法均需要自定义级联层的名称，称为命名级联层
>> 命名带规则语法
>> 此时，我们可以使用下面的单命名语法或者多命名语法来灵活调整不同级联层的优先级顺序。如果我们没有这样的需求，则可以直接使用匿名级联层语法。
#书摘 #css #前端
《CSS 世界》关于 word-break 和 word-wrap
1. 首先了解一下word-break属性，语法如下：
-
-
-
2. 接下来是 word-wrap
-
word-wrap 之前由于和 word-break 长得太像，难免会让人记不住或搞混，于是在 CSS3 规范里，这个属性的名称被修改了，叫作 `overflow-wrap`。这个新属性名称显然语义更准确，也更容易区别和记忆。但是，也就 Chrome 和 Safari 等 WebKit 或 Blink 浏览器支持这个新属性。因此，虽然换了个好看好用的新名字，为了兼容性，目前还是乖乖地使用word-wrap吧。(我说怎么这俩一样)
3. 区别：
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
《CSS 世界》关于 word-break 和 word-wrap
1. 首先了解一下word-break属性，语法如下：
word-break: normal;
word-break: break-all;
word-break: keep-all;
-
normal ：使用默认的换行规则。-
break-all ：允许任意非 CJK（Chinese/Japanese/Korean）文本间的单词断行。-
keep-all ：不允许 CJK 文本中的单词换行，只能在半角空格或连字符处换行。非 CJK 文本的行为实际上和 normal 一致。
break-all keep-all 就不这样了，虽然有一定的发展和进步，但目前移动端还不适合使用 word-break:keep-all 。 另外，Chrome、Safari 以及其他 WebKit 或 Blink 浏览器还支持非官方标准的 break-word 值，其表现就和 word-wrap:break-word 一样，这个知识了解一下即可。2. 接下来是 word-wrap
word-wrap: normal;
word-wrap: break-word;
normal ：就是大家平常见得最多的正常的换行规则。-
break-word ：一行单词中实在没有其他靠谱的换行点的时候换行。word-wrap 之前由于和 word-break 长得太像，难免会让人记不住或搞混，于是在 CSS3 规范里，这个属性的名称被修改了，叫作 `overflow-wrap`。这个新属性名称显然语义更准确，也更容易区别和记忆。但是，也就 Chrome 和 Safari 等 WebKit 或 Blink 浏览器支持这个新属性。因此，虽然换了个好看好用的新名字，为了兼容性，目前还是乖乖地使用word-wrap吧。(我说怎么这俩一样)
3. 区别：
word-break:break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap:break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
