《CSS3实战》——成林，50实战例 第一天

第二章：CSS3新增的选择器

CSS1定义的选择器

选择器	类型	说明
E	类型选择器	选择指定类型的元素
#myid	ID选择器	选择id为myid的元素
.myclass	类选择器	选择类为myclass的元素
E F	包含选择器	选择包含在E内的F元素，E和F可以是任意合法的选择符组合
E:link	链接伪类选择器	a链接未被访问
E:visited	链接伪类选择器	a链接已被访问
E:active	用户操作伪类选择器	a链接被激活时
E:hover	用户操作伪类选择器	匹配元素正在被鼠标经过
E:focus	用户操作伪类选择器	匹配元素获取焦点
E::first-line	伪元素选择器	E元素内的第一行文本
E::first-letter	伪元素选择器	E元素内的第一个字符

CSS2定义的选择器

选择器	类型	说明
*	通配选择器	选择文档内所有元素
E[foo]	属性选择器	选择定义了foo属性的E，E可省略
E[foo=“bar”]	属性选择器	选择foo属性的属性值为bar的E，E可省略
E[foo~=“bar”]	属性选择器	选择以空格隔开的其中一个为bar的元素，例如匹配a[title~=“bar”]匹配不匹配
E[foo|=“en”]	属性选择器	元素定义了foo属性且foo属性值是用-分割的列表，值开头的字符为"en",[lang|=“en”]匹配不匹配
E:first-child	结构伪类选择器	选择匹配E的元素，且该元素为父元素的第一个子元素
E:lang(fr)	:lang()伪类选择器	选择匹配E元素且该元素显示内容的语言类型为fr
E::before	伪元素选择器	匹配E的元素前面插入内容
E::after	伪元素选择器	匹配E的元素后面插入内容
E > F	子包含选择器	选择匹配F元素且该元素为E的第1级子类
E + F	相邻兄弟选择器	选择匹配F元素且该元素位于E的元素后面相邻的位置

CSS3新增的属性选择器列表

选择器	说明
E[foo^=“bar”]	匹配foo属性的值包含前缀为bar的元素
E[foo$=“bar”]	匹配foo属性的值包含后缀为bar的元素
E[foo*=“bar”]	匹配foo属性的值包含为bar的元素

• 2.1实战：文档共享的友善之举

	
	
	


	
超级链接类型标识图标
	
pdf文件
	
ppt文件
	
xls文件
	
gif文件
	
jpg文件
	
png文件
	
txt文件
	
#锚点超链接
	
http://www.baidu.com/

CSS3结构伪类选择器列表

选择器	说明
E:root	选择匹配E元素所在文档的根元素，在HTML中根元素就是html
E:nth-child(n)	选择所有在其父元素中第n个位置的匹配E的子元素，索引的起始值为1，tr:nth-child(3)匹配表格里第三行的tr，tr:nth-child(2n+1)匹配表格奇数行，tr:nth-child(2n)匹配表格偶数行，tr:nth-child(odd)匹配表格奇数行,tr:nth-child(even)匹配表格偶数行
E:nth-last-child(n)	选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n)	选择父元素中第n个位置，且匹配E的子元素
E:nth-last-of-type(n)	选择父元素中倒数第n个位置，且匹配E的子元素
E:last-child	选择位于其父元素的最后一个位置，且匹配E的子元素
E:first-of-type	选择在其父元素中匹配E的第一个同类型子元素
E:last-of-type	选择在其父元素中匹配E的最后一个同类型子元素
E:only-child	选择其父元素只包含一个子元素，且该元素匹配E
E:only-of-type	选择其父元素只包含一个同类型的子元素，且该元素匹配E
E:empty	选择匹配E的元素，且该元素不包含任何节点，文本也属于节点

• 2.2.1实战：设计优雅的数据表格

	
	
	


	
设计优雅的数据表格
	

		

			
排名
			
校名
			
总得分
			
人才培养总得分
			
研究生培养总得分
			
本科生培养总得分
			
科学研究总得分
			
自然科学研究总得分
			
社会科学研究总得分
			
所属省份
			
分省排名
			
学校类型
		
		

			
1
			
清华大学
			
296.77
			
128.92
			
93.83
			
35.09
			
167.85
			
148.47
			
19.38
			
京
			
1
			
理工
		
		

			
2
			
南京大学
			
296.77
			
128.92
			
93.83
			
35.09
			
167.85
			
148.47
			
19.38
			
京
			
2
			
理工
		
		

			
3
			
北京大学
			
296.77
			
128.92
			
93.83
			
35.09
			
167.85
			
148.47
			
19.38
			
京
			
3
			
理工
		
		

			
2
			
厦门大学
			
296.77
			
128.92
			
93.83
			
35.09
			
167.85
			
148.47
			
19.38
			
京
			
4
			
理工
		
	

• 2.2.2实战：CSS大战保龄球