今天看来《众妙之门：精通CSS3》是一本比较旧的书，本书的完成时间应该是在2010年左右，里面谈及的一些内容，在今天已经成为普遍使用的东西。就我个人而言，略读这本书，是为了复习一遍CSS3的知识，同时，也希望能从书中发现一些新的东西。看完之后，新的东西没有多少，即使有，我也没有去关注（内容排版方面）；在书中复习到一些旧的知识，日常开发的确比较常用，在此列举下来，算是一些收获吧。
1、关于伪类选择器
CSS3的伪类分为4种：结构伪类、目标伪类、UI状态伪类和否定伪类。
我觉得分类对于开发者来说并没有什么实际作用，便于记忆罢了。书中提及到的常用伪类有：
nth-child:
用于选择第n个子元素，常用场景一般有：
ul li:nth-child(2) 选择ul的第2个li子元素（括号内的数字是从1开始，n是几就指代第n个元素）
ul li:nth-child(odd) 或 li:nth-child(even) odd选择ul的奇数序列li子元素，even选择ul的偶数序列li子元素
ul li:nth-child(3n) 选择ul的序列为3倍数li子元素
ul li:nth-child(n+3) 选择ul的序列大于3li子元素
ul li:nth-child(-n+3) 选择ul的序列小于3li子元素
nth-last-child
与nth-child类似，nth-last-child（n）是从最后算起的第n个元素。
first-child:
选择第一个子元素
last-child:
选择最后一个子元素
nth-of-type:
用于选择某类型标签的第n个元素，使用形式与nth-of-type类似，区别在于，nth-of-type是指定了元素的标签类型，nth-child是子元素，举例：
<article>
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
</article>
article p:nth-child(2)： 选择的元素是内容为"段落1"的P标签;
article p:nth-of-type(2): 选择的元素是内容为"段落2"的P标签;
first-of-type和last-of-type使用形式也是类似。
only-child:
选择父元素下只有一个子元素
only-of-type:
选择父元素下只有一个某类型的元素
empty:
选择没有子元素和没有元素的元素
enabled和disable
主要应用于表单元素，前者选择没有禁用的元素，后者选择禁用的元素
checked
选择单选框或复选框勾中的元素
not
选择指定元素以外的元素，例如
：not([type="text"])
选择除文本输入框以外的元素
2、一些高级选择器
选择符:
+： 选择跟在后面相邻的兄弟元素
~：选择跟在后面的所有兄弟元素
>：选择所有子元素
[]属性选择器:
[class*=“demo”]
选择class属性中值含有“demo”的元素
[class^=“demo”]
选择class属性中值以“demo”开头的元素
[class$=“demo”]
选择class属性中值以“demo”结尾的元素
伪元素
以“::”（双冒号）出现的选择器
::first-line
第一行
::first-letter
第一个字母
::before
元素之前插入元素
::after
元素之后插入元素
3、！important
拥有最高的样式优先权，使用的形式：
div{
color: red !important
}
这玩意无视选择器优先权，用其它方法是覆盖不了，所有不建议使用。
4、动画
CSS3中的animate属性可以定义一个元素的动画。
5、响应式
使用媒体查询，可以让不同屏幕大小的设备，使用不同的样式。
看完这本书，令我最关注的内容就是以上的5部分，这些知识点在日常开发中有实用价值，而后面的章节谈及到CSS的未来和网页内容排版，我暂不关注。以上简略写写我的一些收获，算是一个巩固过程。
网友评论