css3 new features

CSS3出现已经有一段时间了，在项目中用到的情况可能也不在少数，但是真正的了解CSS3增加的新特性吗，我的回答是NO；当然不知道是可以学的，下面是对这块只是学习后的一些学习记录。

一张图展示css level1-3的选择器

选择器	选择器含义	选择器类型	CSS Level
*	通配选择符，可匹配任意元素	通用选择器	2
E	匹配类型为E的元素	类型选择器	1
E[foo]	匹配某元素，此元素含有”foo”属性	属性选择器	2
E[foo=”bar”]	匹配某元素，此元素的”foo”属性等于bar	属性选择器	2
E[foo~=”bar”]	匹配某元素，此元素的”foo”属性值是由空格链接的多个值组成，其中有一个等于bar	属性选择器	2
E[foo^=”bar”]	匹配某元素，此元素的”foo”属性值由bar开始	属性选择器	3
E[foo$=”bar”]	匹配某元素，此元素的”foo”属性值由bar结束	属性选择器	3
E[foo*=”bar”]	匹配某元素，此元素的”foo”属性值包含bar	属性选择器	3
E:root	匹配某元素所在文档的根元素	结构伪类选择器	3
E:nth-child(n)	匹配元素类型为E且是其父元素的第N个子元素	结构伪类选择器	3
E:nth-last-child(n)	匹配元素类型为E且是其父元素的倒数第N个子元素	结构伪类选择器	3
E:nth-of-type(n)	匹配父元素的第N个类型为E的子元素	结构伪类选择器	3
E:nth-last-of-type(n)	匹配父元素的倒数第N个类型为E的子元素	结构伪类选择器	3
E:first-child	匹配元素类型为E且是父元素的第一个子元素	结构伪类选择器	2
E:last-child	匹配元素类型为E且是父元素的最后一个子元素	结构伪类选择器	3
E:first-of-type	匹配父元素的第一个类型为E的子元素	结构伪类选择器	3
E:last-of-type	匹配父元素的最后一个类型为E的子元素	结构伪类选择器	3
E:only-child	匹配元素类型为E且是父元素中唯一的子元素	结构伪类选择器	3
E:only-of-type	匹配父元素中唯一子元素是E的子元素	结构伪类选择器	3
E:empty	匹配不包含子节点(包括文本)的E元素	结构伪类选择器	3
E:link/E:visited	前者匹配已定义href属性的a元素(未访问)，后者匹配已访问过的a元素	链接伪类选择器	1
E:active/E:hover/E:focus	分别匹配被激活过、被鼠标经过、获得焦点的E元素	用户操作伪类选择器	1、2
E:target	匹配URI中锚点指定的元素	目标伪类选择器	3
E:lang(fr)	匹配E元素，且该元素显示内容的语言类型是fr	语言伪类选择器	2
E:enabled/E:disabled	选择所有可用、不可用的E元素	UI元素状态伪类选择器	3
E:cheched	选择所有选中的E元素(主要用于checkbox和radio)	UI元素状态伪类选择器	3
E::first-line	E元素内的第一行文本	首行伪类选择器(伪选择器)	1
E::first-letter	匹配E元素内的第一个字符	首字符伪类选择器(伪选择器)	1
E::before	匹配E元素前的内容	伪元素选择器	2
E::after	匹配E元素后的内容	伪元素选择器	2
E.warning	匹配类名为warning的元素	类选择器	1
E#isId	匹配Id为isId的元素	ID选择器	1
E:not(s)	匹配类型为E，不匹配选择符为s的元素	否定选择器	3
E F	选择包含在E元素中的F元素	包含选择器	1
E > F	匹配F元素，且该元素为所匹配E元素的子元素	子包含选择器	2
E + F	匹配与E元素相邻的第一个F元素，且F元素在E元素之后	通用兄弟元素选择器	2
E ~ F	匹配位于E元素后面所有的F元素	通用兄弟元素选择器	3

上图中展示了目前CSS1-3支持的所有选择器，借鉴的W3C的内容。

W3C描述的新增特性

在W3CSchool讲述CSS3新增特性的章节中将CSS3新增的特性按照功能分为了6个部分，每个部分又分别包含了几个方面，总结如下：

新增特性名	对应的小分类
选择器的拓展	属性选择器、结构伪类选择器、UI元素状态伪类选择器、目标伪类选择器、否定选择器、通用兄弟选择器
页面布局的加强	多列式布局、可变更的盒模型、可伸缩的布局
元素修饰的加强	RGBA和透明度、圆角支持、多背景图片支持、渐变效果支持、阴影和反射效果
开放字体的支持	CSS3提供@font-face特性为页面自定义字体的展示提供支持
多终端的适配	通过媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式
动画支持	过渡(transition)、旋转缩放(transform)、执行动画(animation)

然而，目前只是对选择器拓展，即CSS3新增的选择器属性进行了学习理解，后面的特性需要继续学习；

属性选择器

从上面最开始整理的图表中可以看出三个CSS3新增的3个属性选择器名称及其相应的功能，如下：

选择器	选择器含义	选择器类型	CSS Level
E[foo^=”bar”]	匹配某元素，此元素的”foo”属性值是由bar开始	属性选择器	3
E[foo$=”bar”]	匹配某元素，此元素的”foo”属性值是有bar结束	属性选择器	3
E[Foo*=”bar”]	匹配某元素，此元素的”foo”属性值包含bar	属性选择器	3

属性选择器示例

<style type="text/css">
	div[foo^="bar"],
	div[foo$="bar"],
	div[foo*="bar"] {
		margin: 0 auto;
		width: 400px;
		height: 30px;
		font-size: 20px;
		border: 1px solid black;
		margin-bottom: 10px;
	}
	.bar-att[foo^="bar"] {
		color: red;
	}
	.att-bar[foo$="bar"] {
		color: blue;
	}
	.attr-bar-con[foo*="bar"] {
		color: green;
	}
</style>

需查看属性选择器示例的可点击此处图片地址
通过查询兼容性：除了IE6，其他浏览器都已经支持。

结构伪类选择器

结构伪类选择器一共12个，在CSS3中新增了11个，E:first-child是在css2中就已经加入了，其归类如下：

选择器	选择器含义	选择器类型	CSS Level
E:root	匹配某元素所在文档的根元素	结构伪类选择器	3
E:nth-child(n)	匹配元素类型为E且是其父元素的第N个子元素	结构伪类选择器	3
E:nth-last-child(n)	匹配元素类型为E且是其父元素的倒数第N个子元素	结构伪类选择器	3
E:nth-of-type(n)	匹配父元素的第N个类型为E的子元素	结构伪类选择器	3
E:nth-last-of-type(n)	匹配父元素的倒数第N个类型为E的子元素	结构伪类选择器	3
E:last-child	匹配元素类型为E且是父元素的最后一个子元素	结构伪类选择器	3
E:first-of-type	匹配父元素的第一个类型为E的子元素	结构伪类选择器	3
E:last-of-type	匹配父元素的最后一个类型为E的子元素	结构伪类选择器	3
E:only-child	匹配元素类型为E且是父元素中唯一的子元素	结构伪类选择器	3
E:only-of-type	匹配父元素中唯一子元素是E的子元素	结构伪类选择器	3
E:empty	匹配不包含子节点(包括文本)的E元素	结构伪类选择器	3

看着不多，但在这几个结构伪类选择器里面很容易把人弄混淆，记得使用之前分清楚其用途；

结构伪类选择器 (挑选了几个作为示例，其他的类似)

<style type="text/css">
	li:nth-of-type(1) {
		font-size: 30px;
		color: green;
	}
	li:nth-child(2) {
		font-size: 20px;
		color: red;
	}
	li:nth-last-child(1) {
		font-size: 12px;
		color: blue;
	}
</style>

需查看结构伪类选择器示例的可点击此处图片地址

UI元素状态伪类选择器

UI元素状态伪类选择器整理如下：

选择器	选择器含义	选择器类型	CSS Level
E:enabled/E:disabled	选择所有可用、不可用的E元素	UI元素状态伪类选择器	3
E:cheched	选择所有选中的E元素(主要用于checkbox和radio)	UI元素状态伪类选择器	3

通过其选择器定义很明显的看出改选择器是什么功能，能够做什么用处，当然，这里也有示例进行验证；

UI元素状态伪类选择器

<style type="text/css">
	.attr-abled-radio {
		width: 330px;
		margin-bottom: 10px;
	}
	.attr-abled-radio:enabled {
		font-size: 16px;
		border: 1px solid red;
	}
	.attr-abled-radio:disabled {
		font-size: 20px;
		border: 1px solid blue;
	}
	.attr-checked:checked {
		font-size: 24px;
		border: 1px solid green;
	}
</style>

需查看UI元素状态伪类选择器示例的可点击此处图片地址

目标伪类选择器

这个新增的选择器感觉不是很好理解，通俗的讲，就是页面上有一个id=thisID的div元素，而此时在URL中接了一个#thisID的话，就会给id为thisID的div加上定义的样式。

选择器	选择器含义	选择器类型	CSS Level
E:target	匹配URI中锚点指定的元素	目标伪类选择器	3

这个选择器不是很好做示例，但是通过前面的含义理解也能够成功记住。

否定伪类选择器

选择器	选择器含义	选择器类型	CSS Level
E:not(s)	匹配类型为E，不匹配选择符为s的元素	否定选择器	3

选择器名字通俗易懂，它的作用是在匹配的一些列元素剔除选择符为s的元素，相当于做了个筛选。

否定伪类选择器

<style type="text/css">
	.attr-abled-radio {
		width: 330px;
		margin-bottom: 10px;
	}
	.attr-abled-radio:not(input) {
		font-size: 16px;
		border: 1px solid red;
		color: red;
	}
</style>

需查看否定伪类选择器示例的可以点击此处图片地址

通用兄弟元素选择器

选择器	选择器含义	选择器类型	CSS Level
E ~ F	匹配位于E元素后面所有的F元素	通用兄弟元素选择器	3

新增通用元素选择器是匹配位于E元素后面所有的F元素，很好理解；而 E + F 选择器是匹配E后面第一个F元素，两个有类似功能，但是又有很大区别，注意理解。

通用兄弟元素选择器

<style type="text/css">
	h3 {
		width: 300px;
		height: 20px;
		font-size: 16px;
		line-height: 20px;
		color: red;
	}
	h3 ~ p {
		font-size: 22px;
		line-height: 30px;
		color: blue;
	}
	h4 {
		border-top: 2px dashed #ccc;
	}
	h4 + h5 {
		font-size: 14px;
		color: green;
	}
</style>