呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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 选择器世界》第6章 被低估的属性选择器
前几章讲述了几个常用的、必须掌握的选择器，以及可以将选择器威力放大数倍的选择符，对新手而言，只要掌握前面这几章的内容，就能实现完全静态的网页布局效果，足以在生产环境中进行开发，再掌握一些基础且常用的CSS属性，就可以算是前端入门了。
但CSS这门语言入门简单，精深却不容易。以本书为例，从本章开始的所有内容都可以看作CSS选择器功能的增强，占据的篇幅达到60%～70%之大，但是覆盖的只是实际开发场景中的30%。
所有设计出的CSS选择器都是有针对性和应对场景的，其中可能有些场景不太常见，但是随着开发的不断深入，早晚会在实践中遇到，此时，如果能够使用对应的CSS选择器，则开发效率和实现效果都会很惊人。
举个例子，我们进行Web Components组件化开发的时候，要想知道组件是否已经被定义，如果你没有学习后面的内容，就要在JavaScript代码中埋一些标记量给CSS使用，其实，是有专门的名为:defined的伪类匹配这种场景的。
从本章开始，对内容的掌握程度决定了读者是普通的还是资深的CSS开发人员。
先介绍一个被大家低估的选择器——属性值匹配选择器。我们平常提到的属性选择器指的是[type="radio"]这类选择器，实际上，属性选择器是简称，其全称为“属性值匹配选择器”。 在正式文档中，类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中class的属性值，ID选择器是HTML元素中id的属性值。
（睡觉！下次再读）
《CSS 选择器世界》第6章 被低估的属性选择器
前几章讲述了几个常用的、必须掌握的选择器，以及可以将选择器威力放大数倍的选择符，对新手而言，只要掌握前面这几章的内容，就能实现完全静态的网页布局效果，足以在生产环境中进行开发，再掌握一些基础且常用的CSS属性，就可以算是前端入门了。
但CSS这门语言入门简单，精深却不容易。以本书为例，从本章开始的所有内容都可以看作CSS选择器功能的增强，占据的篇幅达到60%～70%之大，但是覆盖的只是实际开发场景中的30%。
所有设计出的CSS选择器都是有针对性和应对场景的，其中可能有些场景不太常见，但是随着开发的不断深入，早晚会在实践中遇到，此时，如果能够使用对应的CSS选择器，则开发效率和实现效果都会很惊人。
举个例子，我们进行Web Components组件化开发的时候，要想知道组件是否已经被定义，如果你没有学习后面的内容，就要在JavaScript代码中埋一些标记量给CSS使用，其实，是有专门的名为:defined的伪类匹配这种场景的。
从本章开始，对内容的掌握程度决定了读者是普通的还是资深的CSS开发人员。
先介绍一个被大家低估的选择器——属性值匹配选择器。我们平常提到的属性选择器指的是[type="radio"]这类选择器，实际上，属性选择器是简称，其全称为“属性值匹配选择器”。 在正式文档中，类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中class的属性值，ID选择器是HTML元素中id的属性值。
（睡觉！下次再读）
#书摘 #css #前端
《CSS 选择器世界》第5章 精通CSS选择符
2. 子选择符——箭头(>)
子选择符也是非常常用、重要的一个选择符，IE7浏览器开始支持，它和后代选择符有类似于“远房亲戚”的关系。子选择符只匹配第一代子元素，而后代选择符会匹配所有子元素。
子选择符是一把双刃剑，它通过限定关系使结构更加稳固，但同时失去了弹性和变化，需要审慎使用。
3. 相邻兄弟选择符——加号(+)
相邻兄弟选择符也是非常实用的选择符，它被IE7及以上版本的浏览器支持。它
可以用于选择相邻的兄弟元素，但只能选择后面一个兄弟元素。相邻兄弟选择符会忽略文本节点和注释节点，只认元素节点。
相邻兄弟选择符最有价值的应用还是配合诸多伪类以低成本实现很多实用的交互效果，它是众多高级选择器技术的核心。
- 场景1:用来实现类似:first-child伪类的效果。例如，我们希望除第一个列表以外的其他列表都有margin-top属性值，首先可以想到的就是:first-child，下面介绍另一种方法，那就是借助相邻兄弟选择符，如下：
由于相邻兄弟选择符只能匹配后一个元素，因此第一个元素不会被匹配，于是自然而然实现了非首列表元素的匹配。
实际上，此方法的适用范围比:first-child更广一些，例如，当容器的第一个子元素并非.cs-li的时候，相邻兄弟选择符这个方法依然有效，而:first-child此时却无效了，因为没有任何.cs-li元素是第一个子元素了，也就无法匹配:first-child。
- 场景2:当我们聚焦输入框的时候，如果希望显示后面的提示文字，可以借助相邻兄弟选择符轻松实现 —— 把提示文字预先埋在输入框的后面，当触发focus行为时，提示文字即可显示。HTML和CSS代码分别如下：
4. 随后兄弟选择符——波浪线(~)
随后兄弟选择符和相邻兄弟选择符的兼容性一致，都是从IE7浏览器开始支持的，可以放心使用。两者的实用性和重要程度也是类似的，它们的关系较近。
相邻兄弟选择符只会匹配它后面的第一个兄弟元素，而随后兄弟选择符会匹配它后面的所有兄弟元素。至于其他细节，两者是类似的，例如，随后兄弟选择符也会忽略文本节点和注释节点。
在CSS选择器世界中，并不存在前面兄弟选择符，但是我们在实际开发的时候，确实存在很多场景需要控制前面的兄弟元素，此时又该怎么办呢？
此时标题元素就是深天蓝色，虽然伪类的参数是相邻兄弟选择符，但是匹配的是前面的元素，详见9.4节。
《CSS 选择器世界》第5章 精通CSS选择符
2. 子选择符——箭头(>)
子选择符也是非常常用、重要的一个选择符，IE7浏览器开始支持，它和后代选择符有类似于“远房亲戚”的关系。子选择符只匹配第一代子元素，而后代选择符会匹配所有子元素。
子选择符是一把双刃剑，它通过限定关系使结构更加稳固，但同时失去了弹性和变化，需要审慎使用。
3. 相邻兄弟选择符——加号(+)
相邻兄弟选择符也是非常实用的选择符，它被IE7及以上版本的浏览器支持。它
可以用于选择相邻的兄弟元素，但只能选择后面一个兄弟元素。相邻兄弟选择符会忽略文本节点和注释节点，只认元素节点。
相邻兄弟选择符最有价值的应用还是配合诸多伪类以低成本实现很多实用的交互效果，它是众多高级选择器技术的核心。
- 场景1:用来实现类似:first-child伪类的效果。例如，我们希望除第一个列表以外的其他列表都有margin-top属性值，首先可以想到的就是:first-child，下面介绍另一种方法，那就是借助相邻兄弟选择符，如下：
.cs-li + .cs-li { margin-top: 1em; }
由于相邻兄弟选择符只能匹配后一个元素，因此第一个元素不会被匹配，于是自然而然实现了非首列表元素的匹配。
实际上，此方法的适用范围比:first-child更广一些，例如，当容器的第一个子元素并非.cs-li的时候，相邻兄弟选择符这个方法依然有效，而:first-child此时却无效了，因为没有任何.cs-li元素是第一个子元素了，也就无法匹配:first-child。
- 场景2:当我们聚焦输入框的时候，如果希望显示后面的提示文字，可以借助相邻兄弟选择符轻松实现 —— 把提示文字预先埋在输入框的后面，当触发focus行为时，提示文字即可显示。HTML和CSS代码分别如下：
用户名：<input><span class="cs-tips">不超过10个字符</span>

.cs-tips {
color: gray;
margin-left: 15px;
position: absolute;
visibility: hidden;
}
:focus + .cs-tips {
visibility: visible;
}
4. 随后兄弟选择符——波浪线(~)
随后兄弟选择符和相邻兄弟选择符的兼容性一致，都是从IE7浏览器开始支持的，可以放心使用。两者的实用性和重要程度也是类似的，它们的关系较近。
相邻兄弟选择符只会匹配它后面的第一个兄弟元素，而随后兄弟选择符会匹配它后面的所有兄弟元素。至于其他细节，两者是类似的，例如，随后兄弟选择符也会忽略文本节点和注释节点。
在CSS选择器世界中，并不存在前面兄弟选择符，但是我们在实际开发的时候，确实存在很多场景需要控制前面的兄弟元素，此时又该怎么办呢？
<h4 class="cs-h">标题</h4>
<p class="cs-li">列表内容</p>
.cs-h:has( + .cs-li) {
color: deepskyblue;
}
此时标题元素就是深天蓝色，虽然伪类的参数是相邻兄弟选择符，但是匹配的是前面的元素，详见9.4节。
#书摘 #css #前端
《CSS 选择器世界》第5章 精通CSS选择符
CSS选择符可以让选择器有更丰富的层级关系，使我们从容应对各种相对复杂的样式布局。
CSS选择符目前有下面这几个：后代选择符——空格（ ）、子选择符——箭头(>)、相邻兄弟选择符——加号(+)、随后兄弟选择符——波浪线(~)和列选择符——双管道(||)。其中对于前4个选择符，浏览器开始支持的时间较早，非常实用，是本章的重点。最后的列选择符算是“新贵”，与Table等布局密切相关，但目前浏览器的兼容性还不足以使它被实际应用，因此只简单介绍。
1. 后代选择符——空格（ ）
后代选择符是非常常用的选择符，随手抓取一个线上的CSS文件就可以看到这个选择符，它从IE6时代就开始被支持了。
后代选择符以空格作为分隔符，从前往后的选择器，只要匹配DOM由外而内的层级关系，就会匹配最后一个选择器对应的元素。
> 早些年我拿这道题做测试，结果全军覆没，无人答对，大家都认为1和2的颜色分别为深蓝色和浅蓝色。实际上正确答案是，1和2全部都是深蓝色
当包含后代选择符的时候，整个选择器的优先级与祖先元素的DOM层级没有任何关系，这时要看落地元素的优先级。在本例中，落地元素就是最后的<p>元素。两个<p>元素彼此分离，非嵌套，因此DOM层级平行，没有先后之分。再看选择器的优先级，.lightblue p和.darkblue p出现了一个类选择器（数值10）和一个标签选择器（数值1），选择器优先级数值一样。此时就要看它们在CSS文件中的位置，遵循“后来居上”的规则，由于.darkblue p位置靠后，因此<p>都是按照color:darkblue进行颜色渲染的，于是，最终1和2的文字颜色都是深蓝色。
《CSS 选择器世界》第5章 精通CSS选择符
CSS选择符可以让选择器有更丰富的层级关系，使我们从容应对各种相对复杂的样式布局。
CSS选择符目前有下面这几个：后代选择符——空格（ ）、子选择符——箭头(>)、相邻兄弟选择符——加号(+)、随后兄弟选择符——波浪线(~)和列选择符——双管道(||)。其中对于前4个选择符，浏览器开始支持的时间较早，非常实用，是本章的重点。最后的列选择符算是“新贵”，与Table等布局密切相关，但目前浏览器的兼容性还不足以使它被实际应用，因此只简单介绍。
1. 后代选择符——空格（ ）
后代选择符是非常常用的选择符，随手抓取一个线上的CSS文件就可以看到这个选择符，它从IE6时代就开始被支持了。
后代选择符以空格作为分隔符，从前往后的选择器，只要匹配DOM由外而内的层级关系，就会匹配最后一个选择器对应的元素。
> 早些年我拿这道题做测试，结果全军覆没，无人答对，大家都认为1和2的颜色分别为深蓝色和浅蓝色。实际上正确答案是，1和2全部都是深蓝色
<div class="lightblue">
<div class="darkblue">
<p>1. 颜色是？</p>
</div>
</div>
<div class="darkblue">
<div class="lightblue">
<p>2. 颜色是？</p>
</div>
</div>
.lightblue p {
color: lightblue;
}
.darkblue p {
color: darkblue;
}
当包含后代选择符的时候，整个选择器的优先级与祖先元素的DOM层级没有任何关系，这时要看落地元素的优先级。在本例中，落地元素就是最后的<p>元素。两个<p>元素彼此分离，非嵌套，因此DOM层级平行，没有先后之分。再看选择器的优先级，.lightblue p和.darkblue p出现了一个类选择器（数值10）和一个标签选择器（数值1），选择器优先级数值一样。此时就要看它们在CSS文件中的位置，遵循“后来居上”的规则，由于.darkblue p位置靠后，因此<p>都是按照color:darkblue进行颜色渲染的，于是，最终1和2的文字颜色都是深蓝色。
《CSS 选择器世界》规范与更多字符的合法性
顺着上面这个“不能以数字开头”的案例，我们讲解更多关于选择器命名合法性的内容。
首先，关于命名，看看规范中是如何描述的，如图3-4所示。
- 首字符支持的字符类型是
a～z`、`A～Z`、下划线(`_`)以及非 `ASCII 字符（中文、全角字符等）- 后面的字符支持的字符类型是
a～z`、`A～Z`、`0～9`、下划线(`_`)、短横线(`-`)以及非 `ASCII 字符，后面的字符支持的字符类型中多了数字和短横线。很多人对选择器的合法性认识就停留在上面所述内容的层面，而忽略了图3-4下面的“`escape`”方块。实际上，对于其他没有出现的字符，只要对它们 执行转义来重新编码 就能使其成为所支持的字符类型。也就是说，选择器不仅可以以数字开头，也支持以其他字符开头。这些字符可以是下面的这些。
1. 不合法的ASCII字符，如``!、"、#、$、%、&、'、(、)、*、+、,、-、.、/、:、;、<、=、>、?、@、[、\、]、^、`、{、|、}以及~``
严格来讲，上述字符也应该完全转义。例如，加号(+)的Unicode值是2b，因此选择器需要写成`\2b`加上空格，或者`\00002b`。
但是，对于上述字符，还有一种更优雅的表示方式，那就是直接使用斜杠转义，如
\+
包括IE在内的浏览器都支持上面的斜杠转义写法，因此可以放心使用。唯一需要多提一句的就是冒号(:)，在IE7浏览器下，直接使用\:是不被支持的，如果你的项目需要兼容这种浏览器，可以使用\3a加上空格代替。(其实一般也不会用)2. 中文字符。下面的CSS也是有效的：
.我是foo { color: red; }
3. 中文标点符号，例如：
.。foo { color: red; }
4. emoji字符：
.☺ { color: red; }
「由于emoji字符在手机设备或者macOS系统上自动显示为emoji表情，因此有人会在实验性质的项目中使用emoji字符作为类名，这样，展示源代码的时候，会有一个个表情出现，挺有意思的。
至于其他转义字符，没有在实际项目中使用它们的任何理由。但我个人觉得对于中文命名可以一试。」
（我感觉其实也不用）
#书摘 #css #前端
《CSS 选择器世界》3.2 CSS选择器命名的合法性
本节主要讲解类选择器和ID选择器的命名合法性问题，旨在纠正大家长久以来的错误认识。最常见的错误认识就是类选择器和ID选择器不能以数字开头，如下：
对，上面这种写法确实无效，但这并不是因为不能以数字开头，而是不能直接写数字，需要将其转义，如下：
为什么转义表示为
其实
字符0的Unicode值是30，字符9的Unicode值是39，0～9这10个数字对应的Unicode值正好是30～39。
我们也可以用以下这种方法进行表示：
31前面用4个0进行补全，这样
类名或者ID甚至可以是纯数字，然而，CSS压缩工具会乱压空格，所以在实际开发时，如果想使用数字，建议使用非空格完整表示法。
《CSS 选择器世界》3.2 CSS选择器命名的合法性
本节主要讲解类选择器和ID选择器的命名合法性问题，旨在纠正大家长久以来的错误认识。最常见的错误认识就是类选择器和ID选择器不能以数字开头，如下：
.1-foo { border: 10px dashed; padding: 10px; } /* 无效 */
对，上面这种写法确实无效，但这并不是因为不能以数字开头，而是不能直接写数字，需要将其转义，如下：
.\31 -foo { border: 10px dashed; padding: 10px; }
为什么转义表示为
\31 且后面还有一个空格呢？其实
\31 外加空格是CSS中字符 1 的十六进制转义表示。其中 31 就是字符 1 的 Unicode 值，如下：
console.log('1'.charCodeAt().toString(16)); // 结果是31
字符0的Unicode值是30，字符9的Unicode值是39，0～9这10个数字对应的Unicode值正好是30～39。
我们也可以用以下这种方法进行表示：
.\000031-foo { border: 10px dashed; padding: 10px; }
31前面用4个0进行补全，这样
\31 后面就不用加空格了。类名或者ID甚至可以是纯数字，然而，CSS压缩工具会乱压空格，所以在实际开发时，如果想使用数字，建议使用非空格完整表示法。
#阮一峰的科技周刊 #前端
科技爱好者周刊（第 271 期）：非线性的世界，线性的你
#言
1. "重要的不在于你的努力程度，而在于仔细选择工作、人员和项目。"
2. "真正有效的工作方式，不是铁人三项或马拉松，比拼谁坚持的时间长，而是短跑，当机会来临的时候冲刺，平时注意健康和休息。"
3. "你要像狮子一样，看到猎物一跃而起，而不要牛一样，从早到晚劳作。"
#优质博文 #资源推荐 #设计 #tools
1. 腾讯 13 年，我所总结的Code Review终极大法 📓 腾讯云官方公号的文章，腾讯的技术 Leader 谈他们怎么做 Code Review。
大厂做 review，小厂赶需求...
2. DocuSign 🧰 创建、填写、签名数字文档的在线工具，代码开源。
3. Github Old Feed 🧰 一个油猴脚本，恢复 GitHub 首页的旧版 feed，查看自己关注的人的动态。
3. LoremGenie 🧰 Figma 插件，快速生成用来占位的数据文字，插入设计稿。
4. NoteAI 🧰 用户在该网站输入问题，它会用 AI 从搜索引擎返回的网页结果里面，总结出答案。
5. Idify 🧰 一个开源软件，将用户上传的人像照，转成证件照，全部使用前端代码，数据不会上传。（长的跟 Squoosh 蛮像的哈）
6. Plane 🧰 一个基于 Web 的开源项目管理工具，JIRA 的替代品。
7. Octos 🧰 一个开源的 Windows 桌面软件，用来创建和管理 HTML、CSS 和 JS 做的实时交互式壁纸。
8. 现代 CSS 解决方案（Modern CSS Solutions） 📓 CSS 高级教程，讲解新的 CSS 语法如何解决一些传统问题，一共有30多课。
9. EarTrainX 🧰 该网站提供音乐初学者的各种听音练习，训练辨识旋律的能力。
科技爱好者周刊（第 271 期）：非线性的世界，线性的你
#言
1. "重要的不在于你的努力程度，而在于仔细选择工作、人员和项目。"
2. "真正有效的工作方式，不是铁人三项或马拉松，比拼谁坚持的时间长，而是短跑，当机会来临的时候冲刺，平时注意健康和休息。"
3. "你要像狮子一样，看到猎物一跃而起，而不要牛一样，从早到晚劳作。"
#优质博文 #资源推荐 #设计 #tools
1. 腾讯 13 年，我所总结的Code Review终极大法 📓 腾讯云官方公号的文章，腾讯的技术 Leader 谈他们怎么做 Code Review。
大厂做 review，小厂赶需求...
2. DocuSign 🧰 创建、填写、签名数字文档的在线工具，代码开源。
3. Github Old Feed 🧰 一个油猴脚本，恢复 GitHub 首页的旧版 feed，查看自己关注的人的动态。
3. LoremGenie 🧰 Figma 插件，快速生成用来占位的数据文字，插入设计稿。
4. NoteAI 🧰 用户在该网站输入问题，它会用 AI 从搜索引擎返回的网页结果里面，总结出答案。
5. Idify 🧰 一个开源软件，将用户上传的人像照，转成证件照，全部使用前端代码，数据不会上传。（长的跟 Squoosh 蛮像的哈）
6. Plane 🧰 一个基于 Web 的开源项目管理工具，JIRA 的替代品。
7. Octos 🧰 一个开源的 Windows 桌面软件，用来创建和管理 HTML、CSS 和 JS 做的实时交互式壁纸。
8. 现代 CSS 解决方案（Modern CSS Solutions） 📓 CSS 高级教程，讲解新的 CSS 语法如何解决一些传统问题，一共有30多课。
9. EarTrainX 🧰 该网站提供音乐初学者的各种听音练习，训练辨识旋律的能力。
#书摘 #css #前端
《CSS 选择器世界》3.1 CSS选择器是否区分大小写
CSS选择器有些区分大小写，有些不区分大小写，还有些可以设置为不区分大小写。
在HTML中，标签和属性都是不区分大小写的，而属性值是区分大小写的。
相对应地，在CSS中，标签选择器不区分大小写，属性选择器中的属性也不区分大小写，而类选择器和ID选择器本质上是属性值，因此要区分大小写。
然而，随着各大浏览器支持属性选择器中的属性值时也不区分大小写（在
《CSS 选择器世界》3.1 CSS选择器是否区分大小写
CSS选择器有些区分大小写，有些不区分大小写，还有些可以设置为不区分大小写。
在HTML中，标签和属性都是不区分大小写的，而属性值是区分大小写的。
相对应地，在CSS中，标签选择器不区分大小写，属性选择器中的属性也不区分大小写，而类选择器和ID选择器本质上是属性值，因此要区分大小写。
然而，随着各大浏览器支持属性选择器中的属性值时也不区分大小写（在
] 前面加一个 i ），已经没有严格意义上的对大小写敏感的选择器了，因为类选择器和ID选择器本质上也是属性选择器。因此，如果希望HTML中的类名对大小写不敏感，可以这样:
[class~="val" i] {}《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种语法均需要自定义级联层的名称，称为命名级联层
>> 命名带规则语法
>> 此时，我们可以使用下面的单命名语法或者多命名语法来灵活调整不同级联层的优先级顺序。如果我们没有这样的需求，则可以直接使用匿名级联层语法。
