读《众妙之门:精通CSS3》的一些收获

    今天看来《众妙之门:精通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是子元素,举例:

   

标题1

    

段落1

   

段落2

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的未来和网页内容排版,我暂不关注。以上简略写写我的一些收获,算是一个巩固过程。

你可能感兴趣的:(读《众妙之门:精通CSS3》的一些收获)