呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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 #前端
《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（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。
