今天看来《众妙之门:精通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的未来和网页内容排版,我暂不关注。以上简略写写我的一些收获,算是一个巩固过程。