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
  • 属性选择器示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

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

  • 结构伪类选择器 (挑选了几个作为示例,其他的类似)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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元素状态伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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的元素,相当于做了个筛选。

  • 否定伪类选择器
1
2
3
4
5
6
7
8
9
10
11
<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元素,两个有类似功能,但是又有很大区别,注意理解。

  • 通用兄弟元素选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

需查看通用兄弟元素选择器示例的可以点击此处图片地址

上面所有的选择器属性都经过亲自验证,虽然有些用的场景不多,但是通过选择器含义还是可以明确知道其作用。