《图解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 实战体验:使用基本选择器

2-1.html

.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-2.html

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 实战体验:美化按钮

2-3.html

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 实战体验:制作手风琴效果

2-4.html

":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-7.html

2.8 结构伪类选择器

这种选择器可以根据元素在文档树中的某些特性(如相对位置)定位到它们.

2.8.1 重温HTML的DOM树

2-8.html

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”的浏览器中，布局将会被破坏掉。