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

posted @ 2014-08-11 16:37  ccforeverd  阅读(414)  评论(0编辑  收藏  举报