《图解CSS3》——笔记（二）
作者：大漠
勘误：http://www.w3cplus.com/book-comment.html
2014年7月15日15:58:11
第二章 CSS3选择器
2.1 认识CSS选择器
2.1.1 CSS3选择器的优势
2.1.2 CSS3选择器分类
┌─1)基本选择器 ┌─3)动态伪类选择器 ├─2)层次选择器 ├─4)目标伪类选择器 CSS3选择器──┼─伪类选择器───────┼─5)语言伪类选择器 ├─9)伪元素 ├─6)UI元素状态伪类选择器 └─10)属性选择器 ├─7)结构伪类选择器 └─8)否定伪类选择器
2.2 基本选择器
2.2.1 基本选择器语法
2.2.2 浏览器兼容性
2.2.3 实战体验:使用基本选择器
.clearfix:after, .clearfix:before { display: table; content: ""; } .clearfix:after { clear: both; overflow: hidden; }
2.2.4 通配选择器
2.2.5 元素选择器
2.2.6 ID选择器
2.2.7 类选择器
多类名选择器.item.important {...}
IE6选择器不支持多类名选择器,将以末尾类名为准,使用时千万要小心!
2.2.8 群组选择器
2.3 层次选择器
2.3.1 层次选择器语法
| 选择器 | 类型 | 功能描述 | 兼容性 |
| E F | 后代选择器(包含选择器) | 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 | 全 |
| E > F | 子选择器 | -----------------------------------是所匹配的E元素的子元素 | IE7+ |
| E + F | 相邻兄弟选择器 | -----------------------------------紧位于匹配的E元素后面 | IE7+ |
| E ~ F | 通用选择器 | 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素 | IE7+ |
2.3.2 浏览器兼容性
2.3.3 实战体验:使用层次选择器选择元素
2.3.4 后代选择器
2.3.5 子选择器
2.3.6 相邻兄弟选择器
active + div {...} 相邻兄弟选择器(E + F)可以选择紧接在另一个元素后的元素,他们具有一个相同的父元素. 即:E和F是同辈元素,F元素在E元素后面,并且相邻,这样就可以使用相邻兄弟选择器来选择F元素.
例中active + div {background: lime;}表示1后面的2,即2是1相邻兄弟元素.
2.3.7 通用兄弟选择器
active ~ div {...} 通用兄弟选择器(E ~ F),用于选择某元素后面的所有兄弟元素,他们具有一个相同的父元素. 即:E和F是同辈元素,F元素在E元素后面,E~F将选中E元素后面的所有F元素.
例中active ~ div {background: lime;}表示1后面的2,3,4,7,即1后面的所有兄弟元素.
2.4 动态伪类选择器
2.4.1 动态伪类选择器语法
| 选择器 | 类型 | 功能描述 | 兼容性 |
| E:link | 链接伪类选择器 | 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过.常用于链接锚点上 | 全 |
| E:visited | ---------------- | ---------------------------------------------------已------------------------------- | 全 |
| E:active | 用户行为伪类选择器 | -------------------且匹配元素被激活.常用于锚点与按钮上 | IE8+ |
| E:hover | --------------------- | -------------------且用户鼠标停留在元素E上.IE6及以下浏览器仅支持a:hover | 全 |
| E:focus | --------------------- | -------------------且匹配的元素获得焦点 | IE8+ |
爱恨原则 ---- LoVe/HAte 即:link-visited-hover-active
2.4.2 浏览器兼容性
IE6及以下浏览器仅支持a:hover
2.4.3 实战体验:美化按钮
bootstrap按钮: (1)正常:渐变+文字阴影 (2)hover:纯色+无文字阴影 (3)点击:内阴影
2.5 目标伪类选择器
在Web页面中,一些URL拥有片段标识符(#+锚点或元素ID),可以链接到页面的某个特定元素.
":target"伪类选择器选取链接的目标元素,然后提供定义样式.
2.5.1 目标伪类选择器语法
| 选择器 | 功能描述 | 兼容性 |
| E:target | 选择匹配E的所有元素,且匹配元素被相关URL指向 | IE9+ |
目标伪类选择器是动态选择器,只有存在URL指向该匹配元素时,样式效果才会生效.
2.5.2 浏览器兼容性
在IE低版本,需要用JavaScript实现.
2.5.3 实战体验:制作手风琴效果
":target"应用场景:
1) 高亮显示区块
2) 从互相层叠的盒容器或图片中突出显示其中一项
3) tabs效果
4) 幻灯片效果
5) 灯箱效果
6) 相册效果
其中几项效果使用JavaScript制作会更好,因为纯CSS的版本可能存在潜在的易用性和可用性问题.
2.6 语言伪类选择器
使用语言伪类选择器来匹配使用语言的元素是非常有用的,特别是用于多语言版本的网站,其作用更是明显.
可以使用它来根据不同语言版本设置页面的字体风格.
2.6.1 语言伪类选择器语法
为文档指定语言有两种方法: 一种使用HTML5,可以直接设置文档的语言: <!DOCTYPE HTML> <html lang="en-US"> 另一种是手动在文档中指定lang属性,并设置对应的语言值: <body lang="fr">
E:lang(language)表示匹配E的所有元素,且匹配元素指定了lang属性,而且其值为language.
2.6.2 浏览器兼容性
IE8+
对于IE6: 英文版本下设置类名".en",法文版本下设置类名".fr",通过类名给引文定义不同的样式. 对于IE7: 可以使用和IE6相同的方法,或者使用属性选择器中的"E[foo|="en"]"选择器为不用的语言版本的引文设置不同样式.
2.6.3 实战体验:定制不同语言版本引文风格
en: 2-5.html
fr: 2-6.html
引文: <p>WWF's goal is to: <q cite="http://www.wwf.org"> // 引文标签 build a future where people live in harmony with nature </q> we hope they succeed.</p>
引文效果: :lang(en) { quotes:'"' '"'; // 引文特效 } :lang(en) q {background: red;} :lang(fr) { quotes:'«' '»'; } :lang(fr) q {background: green;}
2.7 UI元素状态伪类选择器
主要用于form表单元素上,提高网页的人机交互,操作逻辑以及页面的整体美观,使表单页面更具个性与品位,而且使用户操作页面表单更便利和简单.
2.7.1 UI元素状态伪类选择器语法
UI元素状态一般包括:启用,禁用,选中,未选中,获得焦点,失去焦点,锁定和待机等.
| 选择器 | 类型 | 功能描述 | 兼容性 |
| E:checked | 选中状态伪类选择器 | 匹配选中的复选按钮或单选按钮表单元素 | IE9+ |
| E:enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 | IE9+ |
| E:disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 | IE9+ |
2.7.2 浏览器兼容性
低版本浏览器加上类名,如".disabled".
2.7.3 实战体验:Bootstrap的表单元素UI状态
2.8 结构伪类选择器
这种选择器可以根据元素在文档树中的某些特性(如相对位置)定位到它们.
2.8.1 重温HTML的DOM树
2.8.2 结构伪类选择器语法
| 选择器 | 功能描述 | 兼容性 |
| E:first-child | 作为父元素的第一个子元素的元素E,与E:nth-child(1)等同 | IE9+ |
| E:last-child | ------------最后---------------------,与E:nth-last-child(1)等同 | |
| E:root | 选择匹配元素E所在文档的根元素,在HTML文档中,根元素始终是html,此时选择器与html类型选择器匹配的内容相同 | |
| E F:nth-child(n) | 选择父元素E的第n个子元素F.其中n可以是整数(1,2,3),关键字(even,odd),可以是公式(2n+1,-n+5),而且n值的起始值为1,而不是0 | |
| E F:nth-last-child(n) | -----------倒数---------------------------------------------------------------------------------------------- | |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 | |
| E:nth-last-of-type(n) | -----------------------倒数--------- | |
| E:first-of-type | --------------------------第一个----,与E:nth-of-type(1)等同 | |
| E:last-of-type | -----------------------倒数第一个---,与E:nth-last-of-type(1)等同 | |
| E:only-child | 选择父元素只包含一个子元素,且该子元素匹配E元素 | |
| E:only-of-type | 选择父元素只包含一个同类型的子元素,且该子元素匹配E元素 | |
| E:empty | 选择没有子元素的元素,而且该元素也不包含任何文本节点 |
只有“:first-child”属于CSS2.1，此外其他的结构伪类选择器都是CSS3的新特性。
2.8.3 浏览器兼容性
2.8.4 结构伪类选择器中的n是什么
1.参数n为具体的数值
2.参数n为表达式“n*length”
3.参数n为表达式“n+length”
4.参数n为表达式“-n+length”
5.参数n为表达式“n*length+b”
6.参数n为关键词“odd”（奇数个）
7.参数n为关键词“even”（偶数个）
跟踪元素系列的序号变化并自动匹配将会更为准确、高效，而且维护非常方便
2.8.5 结构伪类选择器的使用方法详解
有用样式：ul｛list-style: none outside none｝，字体arial的数字效果不错
1.:first-child的使用
如果使用“:first-child”来移除一个浮动元素的左边距或右边距，在不支持“:first-child”的浏览器中，布局将会被破坏掉。