css3 新增了许多特性。按照功能分为了6个部分,每个部分又分别包含了几个方面,总结如下:
新增特性名 | 对应的小分类 |
---|---|
选择器的拓展 | 属性选择器、结构伪类选择器、UI元素状态伪类选择器、目标伪类选择器、否定选择器、通用兄弟选择器 |
页面布局的加强 | 多列式布局、可变更的盒模型、可伸缩的布局 |
元素修饰的加强 | RGBA和透明度、圆角支持、多背景图片支持、渐变效果支持、阴影和反射效果 |
开放字体的支持 | CSS3提供@font-face特性为页面自定义字体的展示提供支持 |
多终端的适配 | 通过媒体查询(media queries)可以让你为不同的设备基于它们的能力定义不同的样式 |
动画支持 | 过渡(transition)、旋转缩放(transform)、执行动画(animation) |
但是今天我们只对 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 |
下面我们就部分选择器,给出一些代码示例:
属性选择器
1 | <style type="text/css"> |
结构伪类选择器
1 | <style type="text/css"> |
UI元素状态伪类选择器
1 | <style type="text/css"> |
否定伪类选择器
1 | <style type="text/css"> |
通用兄弟元素选择器
1 | <style type="text/css"> |
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!