正文

《图解CSS3》——笔记（二）

IP云
IP云V管理员/8 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

作者：大漠

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

相关阅读

目录[+]