网站首页 > 知识剖析 正文
CSS有什么好研究的？
很多人觉得很奇怪，CSS有什么好研究的。怎么说呢？就好比，河水流动、苹果下落，这些虽然看起来都是理所当然的现象，没什么好研究的，但实际上，一旦深入，就可以从这些简单现象中发现新的世界。
然而，发现与探索的过程是艰辛的，往往会付出很多，但发现很少，需要有足够的热爱以及钻研精神才能坚持下去并有所收获。恰好，我就是这种类型的人，我喜爱技术研究，喜欢做这种看起来吃力不讨好的事情，但这些年的坚持也让我有了足够的积累。本书的内容就是我根据这些年研究总结出来的精华、经验和技巧，也就是说，大家只要花几小时捧起这本书，就能学到我花费几年的时间提炼出来的东西，这些东西就是所谓的“干货”，它们是技术文档和技术手册上没有的，是稀缺且独一无二的。
而这些稀缺的“干货”，就是你和普通CSS开发人员的技术分水岭，也是你未来的竞争力所在。行业里有一拨儿人，也自称前端，但是只停留在可以根据设计稿写出页面这种水平，这种程度的人没有技术优势，一旦年龄和体力跟不上，将很容易被行业淘汰，因此你需要的不是浮于表面的那一点知识，而是更有深度、与用户体验走得更近的干货和技能。这些就是本书能提供给你的。
正确认识本书
这是一本CSS进阶书，非常适合有一定CSS基础的前端人员学习和参考，新手读起来会有些吃力，因为为了做到内容精练，书中会直接略去过于基础的知识。
本书融入了大量我的个人理解，这些理解是我多年持之以恒对CSS进行研究和思考后，经过个人情感润饰和认知提炼获得的产物。因此，与干巴巴的教条式的技术书相比，本书要显得更易于理解，有温度，更有人文关怀。但是，个人的理解并不能保证百分之百正确，因此，本书的个别观点也可能不对，欢迎读者提出质疑和挑战。
由于规范尚未定稿，本书部分比较前沿的知识点在未来会发生某些小的变动，我会实时跟进，并在官方论坛同步更新。
CSS选择器世界
张鑫旭 著
- CSS选择器揭秘，CSS指南
- Web前端开发技术教程，”鑫空间-鑫生活”博主及《CSS世界》作者又一力作
- 全套在线demo，专属图书论坛及官方网站
CSS选择器是CSS世界的支柱，撑起了整个精彩纷呈的CSS世界。本书专门介绍CSS选择器的相关知识。在本书中，作者结合多年从业经验，在CSS基础知识之上，充分考虑前端开发人员的开发需求，以CSS选择器的基本概念、优先级、命名、*佳实践以及各伪类选择器的概述和适用场景为技术主线，为CSS开发人员介绍有竞争力的知识和技能。此外，本书配有专门的网站，用以进行实例展示和问题答疑。
作为一本CSS进阶书，本书非常适合有一定CSS基础的前端开发人员学习和参考。
主体目录
- 第1章 概述 免费
- 第2章 CSS选择器的优先级 免费
- 第3章 CSS选择器的命名
- 第4章 精通CSS选择符
- 第5章 元素选择器
- 第6章 属性选择器
- 第7章 用户行为伪类
- 第8章 URL定位伪类
- 第9章 输入伪类
- 第10章 树结构伪类
- 第11章 逻辑组合伪类
- 第12章 其他伪类选择器
《CSS选择器世界》样章试读
以下内容截选自《CSS选择器世界》第2章第２.２节。
2.2 深入CSS选择器优先级
本节内容将有助于深入理解CSS选择器的优先级，包括计算规则、实用技巧以及一些奇怪的有趣特性。
2.2.1 CSS选择器优先级的计算规则
对于CSS选择器优先级的计算，业界流传甚广的是数值计数法。具体如下：每一段CSS语句的选择器都可以对应一个具体的数值，数值越大优先级越高，其中的CSS语句将被优先渲染。其中，出现一个0级选择器，优先级数值+0；出现一个1级选择器，优先级数值+1；出现一个2级选择器，优先级数值+10；出现一个3级选择器，优先级数值+100。
于是，有表2-1所示的计算结果。
表2-1选择器优先级计算值
趁热打铁，我出一个小题考考大家，<body>元素的颜色是红色还是蓝色？
<html lang="zh-CN">
<body class="foo">颜色是？</body>
</html>
body.foo:not([dir]) { color: red; }
html[lang] > .foo { color: blue; }
我们先来计算一下各自的优先级数值。
首先是body.foo:not([dir])，出现了1个标签选择器body，1个类名选择器.foo和1个否定伪类:not，以及属性选择器[dir]，计算结果是1+10+0+10，也就是21。
接下来是html[lang] > body.foo，出现了1个标签选择器html，1个属性选择器[lang]和1个类名选择器.foo，计算结果是1+10+10，也就是21。
这两个选择器的计算值居然是一样的，那该怎么渲染呢？
这就引出了另外一个重要的规则—“后来居上”。也就是说，当CSS选择器的优先级数值一样的时候，后渲染的选择器的优先级更高。因此，上题的最终颜色是蓝色（blue）。
后渲染优先级更高的规则是相对于整个页面文档而言的，而不仅仅是在一个单独的CSS文件中。例如：
<style>body { color: red; }</style>
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
其中在a.css中有：
body { color: yellow; }
在``b.css中有：
body { color: blue; }
此时，body的颜色是蓝色，如图2-1所示，因为blue这段CSS语句在文档中是最后出现的。
图2-1 浏览器中body颜色的优先级
还有一个误区有必要强调一下，那就是CSS选择器的优先级与DOM元素的层级位置没有任何关系。例如：
body .foo { color: red; }
html .foo { color: blue; }
请问.foo的颜色是红色还是蓝色？
答案是蓝色。虽然<body>是<html>的子元素，离.foo的距离更近，但是选择器的优先级并不考虑DOM的位置，所以后面的html.foo{}的优先级更高。
1．增加CSS选择器优先级的小技巧
实际开发时，难免会遇到需要增加CSS选择器优先级的场景。例如，希望增加下面.foo类名选择器的权重：
.foo { color: #333; }
很多人的做法是增加嵌套，例如：
.father .foo {}
或者是增加一个标签选择器，例如：
div.foo {}
但这些都不是最好的方法，因为这些方法增加了耦合，降低了可维护性，一旦哪天父元素类名变化了，或者标签换了，样式岂不是就失效了？这里给大家介绍一个增加CSS选择器优先级的小技巧，那就是重复选择器自身。例如，可以像下面这样做，既提高了优先级，又不会增加耦合，实在是上上之选：
.foo.foo {}
如果你实在不喜欢这种写法，借助必然会存在的属性选择器也是不错的方法。例如：
.foo[class] {}
#foo[id] {}
2．对数值计数法的点评
上面提到的CSS选择器优先级数值的计数法实际上是一个不严谨的方法，因为1和10之间的差距实在太小了，这也就意味着连续10个标签选择器的优先级就和1个类名选择器齐平了。然而事实并非如此，不同等级的选择器之间的差距是无法跨越的存在。但由于在实际开发中，我们是不会连续写上多达10个选择器的，因此不会影响我们在实际开发过程中计算选择器优先级。
而且对于使用CSS选择器而言，你的书写习惯远比知识更重要，就算你理论知识再扎实，如果平时书写习惯糟糕，也无法避免CSS样式覆盖问题、样式冲突等问题的出现。我将在第3章中深入探讨这个问题。因此，对于数值计算法，我的态度是，学一遍即可，没有必要反复攻读，做到面面俱到，只要你习惯足够好，是不会遇到乱七八糟的优先级问题的。
在CSS选择器这里，等级真的是无法跨越的鸿沟吗？其实不是，这里有大家不知道的冷知识。
2.2.2 256个选择器的越级现象
有如下HTML：
<span id="foo" class="f">颜色是？</span>
如下CSS：
#foo { color: #000; background: #eee; }
.f { color: #fff; background: #333; }
很显然，文字的颜色是#000，即黑色，因为ID选择器的级别比类名选择器的级别高一级。但是，如果是下面的CSS呢？256个.f类名合体：
#foo { padding: 10px 20px; color: #000; background: #eee; }
.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f { color: #fff; background: #333; }
在IE浏览器下，神奇的事情发生了，文字的颜色表现为白色，背景色表现为深色，如图2-2所示。
图2-2 IE浏览器中类名的优先级更高
在IE浏览器下，读者可以输入https://demo.cssworld.cn/selector/2/2-1.php亲自体验与学习。
同样，256个标签选择器的优先级大于类名选择器的优先级的现象也是存在的。
实际上，在过去，Chrome浏览器、Firefox浏览器下都出现过这种256个选择器的优先级大于上一个选择器级别的现象，后来，大约2015年之后，Chrome浏览器和Firefox浏览器都修改了策略，使得再多的选择器的优先级也无法超过上一级，因此，目前越级现象仅在IE浏览器中可见。
为什么会有这种有趣的现象呢？早些年查看Firefox浏览器的源代码，发现所有的类名都是以8字节字符串存储的，8字节所能容纳的最大值就是255，因此同时出现256个类名的时候, 势必会越过其边缘，溢出到ID区域。而现在采用了16字节的字符串存储，能容纳的类型数量足够多了，就不会出现这种现象。
当然，这个冷知识并没有多大的实用价值，大致了解一下即可。
猜你喜欢
- 2024-11-26 可能是最全的Thymeleaf参考手册(六):迭代
- 2024-11-26 前端必看书籍整理
- 2024-11-26 前端工程师写CSS的通病，你中了几条?内附解决方案
- 2024-11-26 一篇文章带你快速入门JavaScript(实操代码)
- 2024-11-26 纯干货:node.js入门教程以及中文学习资源大搜罗!
- 2024-11-26 原来构建设计系统，就像搭乐高一样
- 2024-11-26 Dedecms织梦模板安装教程、模板更换教程汇总
- 2024-11-26 分享9个前端开发人员必备的查询手册工具网站
- 2024-11-26 在w3cschool上学完html、css后要怎么提升
- 2024-11-26 切换到了 Tailwind CSS，真香!
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)