什么是图像替换技术

你可以像平常一样将文本添加到文档中，然后使用CSS隐藏文本并在它的位置上显示一个背景图片。

这样的话，搜索引擎仍然可以搜索HTML文本，而且如果禁用CSS，文本仍然会显示。

案例演示

我们的选择

看了这个概念，我们马上就会想到一些比较流行的图片替换技术。如果我们抛开浏览器不谈，考虑到其它显示终端的话，有些图片替换技术是不可行的。

接下来，我们就看一下各种各样图片替换技术。

display:none

1
2
3
4

h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
    display:none;
}

visibility:hidden

1
2
3
4

h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
	visibility:hidden;
}

position:absolute;

1
2
3
4
5
6

h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
    position:absolute;
    left: -9999px;
    top: -9999px;
}

overflow:hidden;

1
2
3
4
5
6

h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
    display:block;
    height:0px;
    overflow:hidden;
}

text-indent:-9999px;

1
2
3
4

h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3{
  text-indent:-9999px;
}

line-height

1
2
3
4
5
6
7

h3{background-position:0 -143px;}
h3 span{
    height:20px; 
    overflow:hidden;
    line-height: 60px;/*行高最好设3倍或以上*/
    display:block;
}

最佳实战，就是它

1
2

 
.screen-reader-text{position:absolute;left: -9999px;top: -9999px}

案例演示

推荐文章: 《{ hide_text } CSS文字隐藏总结报告》

相关日志 »

• 2009/04/29 -- 84个超级有用的CSS技巧与资源 (0)
• 2010/08/17 -- IE CSS Bug Table (1)
• 2010/04/15 -- CSS中区别IE6, IE7和 IE8 的4个非常有用的字符 (1)
• 2010/03/09 -- IE CSS Bugs 列表和解决方法 (0)
• 2010/03/04 -- Web 设计中的 5 个最具争议性的话题 (0)
• 2010/01/26 -- 网页设计中的面包屑导航：实例和最佳做法 (0)
• 2010/01/25 -- Sexy Bookmarks 效果，基于CSS (0)
• 2010/01/25 -- 15个富有创意的Web表单设计,基于CSS (0)
• 2010/01/14 -- 实现侧边栏滚动的多种技术，基于CSS,jQuery or MooTools (1)
• 2009/11/03 -- 征服，高级CSS选择器(收藏) (1)

不过，官方也存在一点不足和错误，来自Alipay前端同仁已经为我们纠正了一些来自官方的错误，并重新整理成表，非常方便查阅。

我这儿就直接收藏了。

Alipay UED 《打败 IE 的葵花宝典：CSS Bug Table》

IE CSS Bug Table :

相关日志 »

• 2010/03/09 -- IE CSS Bugs 列表和解决方法 (0)
• 2010/09/02 -- 图像替换技术的最佳实战 (2)
• 2010/04/15 -- CSS中区别IE6, IE7和 IE8 的4个非常有用的字符 (1)
• 2010/03/02 -- IE条件注释与CSS Hacks (0)
• 2009/06/16 -- 5种解决ie6下png图片透明的方法 (0)
• 2009/04/29 -- 84个超级有用的CSS技巧与资源 (0)

目前，这个网站上包含了 46 个“普通的Bug” ， 5个“布局方面的Bug” ，6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”，所有的这些Bug有58个指南和70个解决方法。

这个列表目前更新到：2009年8月19日，周三 ，15时38分47秒。

最新发表的教程：该网站包含44 IE6 bugs, 28 IE7 bugs 和19 IE8 bugs.

下面是所有的bug列表，你可以点击每个BUG名的链接查看更详细的说明和解决方法。

IE的CSS Bug：普通Bug

这部分 IE 的 bug 是比较普通的无法归到其它种类，或是同时属于多个种类的Bug。

IE的CSS Bug：布局类 Bug

IE的CSS Bug：不支持的功能

IE的CSS Bug：程序崩溃 Bug

这个BUG可以导致整个 IE 崩溃.

如果想了解更多的IE CSS Bugs ，请看原文。

原译文来自：Internet Explorer CSS Bugs

相关日志 »

• 2010/08/17 -- IE CSS Bug Table (1)
• 2010/09/02 -- 图像替换技术的最佳实战 (2)
• 2010/04/15 -- CSS中区别IE6, IE7和 IE8 的4个非常有用的字符 (1)
• 2010/03/02 -- IE条件注释与CSS Hacks (0)
• 2010/02/27 -- Internet Explorer 6 的盛衰史 (0)
• 2009/06/16 -- 5种解决ie6下png图片透明的方法 (0)
• 2009/04/29 -- 84个超级有用的CSS技巧与资源 (0)

争议之一：链接是否应该在新窗口打开

正方:

外部链接应该始终从新窗口打开，当你浏览一个站点的时候，点击了一个链接，却被带到另外一个站点，你在这个站点的会话也因此丢失，这实在令人恼怒。 因此，站点内的链接可以在现有窗口打开，而站点外链接则应该在新窗口打开。

反方:

作为 Web 设计师，我们不该控制用户的行为，一个链接是否在新窗口打开，应该是用户自己的选择。剥夺用户的控制权，在用户的桌面上打开一堆窗口或标签，这才是真正让 人恼怒的事。如果用户想打开新窗口，他们可以自己选择，而对非熟练用户，新窗口让他们丢失了“后退”按钮更让他们无所适从。

和事佬:

总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

争议之二：在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

正方:

事实证明，“Click here” 比描述性的链接更容易获得点击，因此应该使用该词汇以获得更好的点击率。

反方:

“Click here” 一类的链接损害 Web 的易用性，用户在点击之前，只能通过周围的上下文关系猜测这个链接是做什么的。Quality guidelines 建议，任何链接文字都应该明确描述该链接的目的。

和事佬:

为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 “Click here” 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

争议之三：是否该继续使用  <b> 和 <i> 两个标签?

正方：

如果你仅仅想把一个词设为粗体，而这个词并没有强调表示重要的意思，应该使用 <b> 标签，不该用 <strong> 标签，读屏软件对 <b> 和<i> 标签有不同的发音，而 HTML5 规范中仍包含这两个标签。

反方:

这两个标签的作用是将文字设置为粗体或斜体，从语义角度看，任何装饰性的东西都应该使用 CSS 实现，如果要强调一个词语，应该使用 <strong> 或 <em> 标签。

和事佬：

<b> 和 <i> 标签不应该用于修饰文字的式样，这些视觉的修饰应该交由 CSS 处理。如果要强调一个词汇或语句，应该使用 <strong> 或 <em> 标签。只有在那些没有别的标签可用的场合，才可以考虑 <b> 和 <i> 。

争议之四：站点 Logo 是否因出现在 <h1> 标签中?

正方s:

Logo 不应包围在标题标签中，标题标签应该包含这个页面的标题或描述性内容，这是 SEO 的最佳方式，否则，站点中的每个页的标题岂不是全变成公司名字了？

反方:

一个站点最明显的标志是它的 Logo， 而 <h1> 是一个页面最顶级的标题，将 Logo 包围其中很自然，这样，即使没有 CSS 人们也很容易该明白这个页面的结构。

和事佬:

标题标签的作用是描述内容的层级结构，如果一个站点有一个描述站点内容的标题，应该放在 <h1> 中，否则，第二级结构或描述性的对象，就是 Logo。

争议之五：是否应该支持 IE6？

正方:

IE6 现在仍占有 10% 的市场份额（在国内更高-译者注），因此，网站毫无疑问应该支持 IE6。世界上仍然有很多公司的系统仍需使用 IE6 访问，另外，还有很多人根本不知道怎么升级他们的浏览器。

反方:

IE6 已经过时，不支持最新的 Web 技术，它给在线用户带来安全隐患，也是众多 Web 开发设计师的噩梦。包括 YouTube 在内的大型站点已经停止支持 IE6。 你也不例外。

和事佬:

IE6 毫无疑问在衰退，随着大公司对它的抛弃，它的死亡可能来得比预期还快，是否支持 IE6 要看的具体情况，可以考虑为 IE6 用户提供最基本的页面格式，而不必为它挣扎。

本文来源：http://line25.com/articles/top-5-web-design-debates-that-cause-the-most-riots

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

相关日志 »

• 2009/09/15 -- 漫画：混乱的标记语言XHTML2/HTML5 (0)
• 2009/08/31 -- Opera的Web标准课程（推荐） (1)
• 2009/08/19 -- Web前端开发需要掌握的技能(图解) (0)
• 2010/01/26 -- 网页设计中的面包屑导航：实例和最佳做法 (0)
• 2009/10/20 -- 让XHTML/CSS页面可正常打印 (收藏) (0)
• 2009/04/17 -- Add-Icons-next-to-your-links-with-CSS (0)
• 2010/09/02 -- 图像替换技术的最佳实战 (2)
• 2010/05/17 -- HTML5入门 之 新标签的解析 篇 (3)
• 2010/05/13 -- HTML5入门 之 样板和兼容IE浏览器篇 (6)
• 2010/05/11 -- HTML5入门之标签篇《下》 (0)

一、什么是IE条件注释？

IE条件注释，顾名思义就是使用IE特有的条件语句来显示代码块。

这些巧妙的逻辑片段只能被IE浏览器所支持，其它的浏览器理解为纯粹的HTML注释，不起任何作用。条件注释在IE5中首次出现，并且得到了Widnows浏览器所有后续版本的支持。IE条件注释及其有效，而且非常容易记住。通过这些技巧，我们可以为基于Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是，HTML和CSS代码可以通过验证。主要的缺点是这些注释需要放在HTML页面中，而不是放在CSS中。这样，当你不需要这些东西，或者有所更改的时候，就需要维护很多的地方。好处是通过这种方式使用条件注释，可以很轻松的管理项目中的目标浏览器，并使得CSS补丁文件保持独立自由。更重要的是它帮助我们优化了 CSS样式表，保证了主要样式表的干净，这对于大型网站来说就很重要了，也许你还没有感觉到它的可爱之处。

作为有Web标准意识的开发者，我们始终应该首先在大部分现有的兼容标准的浏览器上测试我们的设计，然后再为那些稍作细微修改就能回到正轨的浏览器提供补丁。

二、条件注释使用方法

条件注释属性

• gt : greater than，选择条件版本以上版本，不包含条件版本
• lt : less than，选择条件版本以下版本，不包含条件版本
• gte : greater than or equal，选择条件版本以上版本，包含条件版本
• lte : less than or equal，选择条件版本以下版本，包含条件版本
• ! : 选择条件版本以外所有版本，无论高低

The Code

我们概括性地说明一下你如何使用条件注释，首先，我们应该把你所有的CSS 等CSS文件放在中。条件注释的基本结构和HTML的注释()是一样的。因此 ，IE以外的浏览器将会把它们看 作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

Target ALL VERSIONS of IE（ 所有的IE可识别 ）

1

<!--[if IE]>  	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />  <![endif]-->

Target everything EXCEPT IE （除IE外都可识别 ）

1

<!--[if !IE]>  <link rel="stylesheet" type="text/css" href="not-ie.css" />  <![endif]-->

Target IE 7 ONLY （ 仅IE7可识别 ）

1

<!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="ie7.css">  <![endif]-->

Target IE 6 ONLY（仅IE6可识别）

1

<!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie6.css" />  <![endif]-->

Target IE 5 ONLY（仅IE5.0与IE5.5可以识别 ）

1

<!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie5.css" />  <![endif]-->

Target IE 5.0 ONLY (只有IE5.0可以识别 )

Target IE 5.5 ONLY（只有IE5.0可以识别）

1

<!--[if IE 5.5000]>  <link rel="stylesheet" type="text/css" href="ie55.css" />  <![endif]-->

Target IE 6 and LOWER（IE6和IE6以下的）

1

<!--[if lt IE 7]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />  <![endif]-->

1

<!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />  <![endif]-->

Target IE 7 and LOWER（IE7和IE7以下的）

1

<!--[if lt IE 8]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />  <![endif]-->

1

<!--[if lte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />  <![endif]-->

Target IE 8 and LOWER（IE8和IE8以下的）

1

<!--[if lt IE 9]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />  <![endif]-->

1

<!--[if lte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />  <![endif]-->

Target IE 6 and HIGHER（IE6和IE6以上的）

1

<!--[if gt IE 5.5]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />  <![endif]-->

1

<!--[if gte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />  <![endif]-->

Target IE 7 and HIGHER（IE7和IE7以上的）

1

<!--[if gt IE 6]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />  <![endif]-->

1

<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />  <![endif]-->

Target IE 8 and HIGHER（IE8和IE8以上的）

1

<!--[if gt IE 7]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />  <![endif]-->

1

<!--[if gte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />  <![endif]-->

Universal IE 6 CSS（通用的IE 6样式）

 处理IE 6和IE6以下的版本始终是一个超特殊的挑战。老态龙钟的IE6，还保持着高额的市场占有率，还不能彻底的放弃它，不然会有许多的客户抱怨我们。不过也有些人正在放弃对它的支持，包括大企业，大型网络应用，甚至政府。有一个不失落的 ，不放弃的 解决办法，那就是使用一个特精简的样式 universal IE 6 CSS.，然后为IE 7和以上（和所有其他浏览器）的应用常规的CSS。

1
2
3

<!--[if !IE 6]><!-->  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />  <!--<![endif]-->   
<!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />  <![endif]-->   
<!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />  <![endif]-->

IE6/IE7/FF的CSS Hacks

1.区别IE和非IE浏览器

1
2
3
4

#tip {
    background:blue; /*非IE 背景藍色*/
    background:red \9; /*IE6、IE7、IE8背景紅色*/
}

2.区别IE6,IE7,IE8,FF

【区别符号】：「\9」、「*」、「_」

【示例】：

1
2
3
4
5

#ue{ /*Firefox 背景变蓝色*/
    background:red \9; /*IE8 背景变红色*/
    *background:black; /*IE7 背景变黑色*/
    _background:orange; /*IE6 背景变橘色*/
}

【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏 览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (方法 1)

【区别符号】：「*」、「_」

【示例】：

1
2
3
4
5

#tip {
    background:blue; /*Firefox背景变蓝色*/
    *background:black; /*IE7 背景变黑色*/
    _background:orange; /*IE6 背景变橘色*/
}

【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox。

4.区别IE6、IE7、Firefox (方法 2)

【区别符号】：「*」、「!important」

【示例】：

1
2
3
4
5

#tip {
    background:blue; /*Firefox 背景变蓝色*/
    *background:green !important; /*IE7 背景变绿色*/
    *background:orange; /*IE6 背景变橘色*/
}

【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox

【区别符号】：「*」、「!important」

【示例】：

1
2
3
4

#tip {
    background:blue; /*Firefox 背景变蓝色*/
    *background:green !important; /*IE7 背景变绿色*/
}

【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (方法 1)

【区别符号】：「*」、「_」

【示例】：

1
2
3
4

#tip {
    *background:black; /*IE7 背景变黑色*/
    _background:orange; /*IE6 背景变橘色*/
    }

【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (方法 2)

【区别符号】：「!important」

【示例】：

1
2
3
4

#tip {
    background:black !important; /*IE7 背景变黑色*/
    background:orange; /*IE6 背景变橘色*/
}

【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

8.区别IE6、Firefox

【区别符号】：「_」

【示例】：

1
2
3
4

#tip {
    background:black; /*Firefox 背景变黑色*/
    _background:orange; /*IE6 背景变橘色*/
}

【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

9. IE-6 ONLY

1

* html #div {      height: 300px;  }

10. NON IE-7 ONLY:

1

#div {     _height: 300px;  }

11. Hide from IE 6 and LOWER:

1

#div {     height/**/: 300px;  }

1

html > body #div {        height: 300px;  }

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/* Opera */  
html:first-child #opera  {  display: block;  }  
/* IE 7 */ 
*:first-child+html{background-color:#F00;}
/* IE 7 */ 
 html > body #ie7  {  *display: block;  }  
/* IE 6 */ 
* html #div{ background-color:#F00;}
/* IE 6 */ 
 body #ie6  {  _display: block;  } 
 
/*IE7及其更低版本*/
*:first-child+html{}*html{}
 
/*IE7,IE7以上和主流浏览器*/
html>body{}
 
/*适合主流浏览器(IE7排除在外，IE7以下的也不行)*/ 
html>/**/body{}
/* Firefox 1 - 2 */ 
 body:empty #firefox12  {  display: block;  }  
/* Firefox */  @-moz-document url-prefix()  {  #firefox { display: block; }  } 
/* Safari */  @media screen and (-webkit-min-device-pixel-ratio:0)  {  #safari { display: block; }  } 
/* Opera */  @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)  {  head~body #opera { display: block; }  }

相关日志 »

• 2010/08/17 -- IE CSS Bug Table (1)
• 2010/04/15 -- CSS中区别IE6, IE7和 IE8 的4个非常有用的字符 (1)
• 2010/03/09 -- IE CSS Bugs 列表和解决方法 (0)
• 2009/06/16 -- 5种解决ie6下png图片透明的方法 (0)

我非常喜欢它的图标弹出悬停效果，然而以前实现的Sexy bookmarks 效果是基于 javascript 库的。

我尝试了一下只使用CSS来实现此效果。我们主要用到的是CSS Sprites技术。CSS Sprites技术是非常有利于网站性能优化的。

Demo演示

The HTML Code :

1
2
3
4
5
6
7
8

<ul class="sharing-cl" id="text"> 
	<li><a class="sh-mail" href="">email</a></li> 
	<li><a class="sh-feed" href="">feed</a></li> 
	<li><a class="sh-tweet" href="">twitter</a></li> 
	<li><a class="sh-face" href="">facebook</a></li> 
	<li><a class="sh-su" href="">stumbleupon</a></li> 
	<li><a class="sh-digg" href="">digg</a></li> 
</ul>

The CSS Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.sharing-cl{
	  overflow:hidden;
	  margin:0;
	  padding:0;
	  list-style:none;
}
.sharing-cl a{
	 overflow:hidden;
	 width:75px;
	 height:30px;
	 float:left;
	 margin-right:5px;
	 text-indent:-200px;
	 background:url("http://www.webdeveloperjuice.com/demos/images/share-sprite.png") no-repeat;
}
	a.sh-su{background-position:-210px -40px;}
	a.sh-feed{background-position:-70px -40px;}
	a.sh-tweet{background-position:-140px -40px;}
	a.sh-mail{background-position:0 -40px;}
	a.sh-digg{background-position:-280px -40px;}
	a.sh-face{
	  margin-right:0;
	  background-position:-350px -40px;
	}
	a.sh-mail:hover{background-position:0 1px;}
	a.sh-feed:hover{background-position:-70px 1px;}
	a.sh-tweet:hover{background-position:-140px 1px;}
	a.sh-su:hover{background-position:-210px 1px;}
	.sh-digg:hover{background-position:-280px 1px;}
	a.sh-face:hover{
	  background-position:-350px 1px;
	}
 
#text{
	  margin-top:3em;
	  font-weight:bold;
	  font-family:helvetica,arial,sans-serif;
}
	#text a{
	  text-indent:0;
	  height:auto;
	  text-align:center;
	  font-size:11px;
	  padding-top:35px;
	  color:#999;
	  text-decoration:none;
	}

如果你需要图片精灵的话，可以在这里下载图片 .

原文来自：Sexy bookmark like effect using pure css : re-cleaned

相关日志 »

• 2010/09/02 -- 图像替换技术的最佳实战 (2)
• 2010/04/15 -- CSS中区别IE6, IE7和 IE8 的4个非常有用的字符 (1)
• 2010/03/04 -- Web 设计中的 5 个最具争议性的话题 (0)
• 2010/01/26 -- 网页设计中的面包屑导航：实例和最佳做法 (0)
• 2010/01/25 -- 15个富有创意的Web表单设计,基于CSS (0)
• 2010/01/14 -- 实现侧边栏滚动的多种技术，基于CSS,jQuery or MooTools (1)
• 2009/11/04 -- 解密CSS Sprites：技巧、工具和教程 (收藏) (0)
• 2009/11/03 -- 征服，高级CSS选择器(收藏) (1)
• 2009/10/20 -- 让XHTML/CSS页面可正常打印 (收藏) (0)
• 2009/09/21 -- CSS3的新功能快速体验和应用 (0)

这么酷的方法，只有CSS3的 UI元素状态伪类 E::selection 选择器才能实现此功能，::selection 它可以选择任何您想要的颜色 ，与您的网站文字匹配协调的高亮颜色。使用鼠标按下不放选择文字的时候可以看到。

目前，只有 Safari 和 Firefox 支持此CSS3属性，不过语法上还有些稍微的区别。

在主流的浏览器中使用感觉非常好，但是，却得到了其他浏览器的支持，非常遗憾。不过丝毫没有改变我们的使用热情,这可能看起来没有什么，但它是一个微妙的效果，可以为您的网站增加一些视觉吸引力！

The CSS3 Code :

1
2
3
4
5
6

::selection {
	background: #ffb7b7; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

View Demo »

不同的段落选择颜色：

p.red::selection {
	background: #ffb7b7;
}
p.red::-moz-selection {
	background: #ffb7b7;
}
p.blue::selection {
	background: #a8d1ff;
}
p.blue::-moz-selection {
	background: #a8d1ff;
}
p.yellow::selection {
	background: #fff2a8;
}
p.yellow::-moz-selection {
	background: #fff2a8;
}

相关日志 »

• 2010/05/06 -- CSS3 和 HTML5 兼容性测试 (3)
• 2010/03/22 -- 简单的斑马纹表格 (2)
• 2010/01/24 -- 在Webkit浏览器中，使用CSS3替代7个JavaScript效果 (0)
• 2009/11/03 -- 征服，高级CSS选择器(收藏) (1)
• 2009/09/21 -- CSS3的新功能快速体验和应用 (0)
• 2009/09/01 -- CSS 3.0 中文参考手册 & CSS3系列教程 (0)

我们将讨论两个：CSS和JavaScript（jQuery，MooTools）技巧。

本文的教程来自：Scroll/Follow Sidebar, Multiple Techniques，具体内容请看原英文内容。

网站：css-tricks.com

CSS 技术

最简单的处理方法就是使用CSS固定定位( CSS fixed positioning)。

The HTML Code

1
2
3
4

<div id="page-wrap">
    <div id="main"></div>
    <div id="sidebar"></div>
</div>

The CSS Code

1
2
3
4
5
6
7
8
9
10
11

#page-wrap {
  width: 600px;
  margin: 15px auto;
  position: relative;
}
 
#sidebar {
  width: 190px;
  position: fixed;
  margin-left: 410px;
}

使用此技术，当向下滚动页面时，使侧边栏永远停留在你的旁边。

View Demo

JavaScript 技术

如果我们使用JavaScript,主要用到的是 window.scroll 事件。

代码优化来自 Doug Neiner:

The jQuery JavaSript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function() {
    var $sidebar   = $("#sidebar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
 
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
 
});

View Demo

The MooTools

在David Walsh Blog上有一个很好好的实例，在我的网站上已成功应用，它是 “MooTools ScrollSidebar”。

View Demo

相关日志 »

• 2010/06/30 -- 盒子（Box）中间的链接（Links）,基于MooTools or jQuery (5)
• 2010/06/24 -- 打破重复的动画效果,基于CSS,MooTools or jQuery (3)
• 2010/03/30 -- 关于‘TOP’置顶链接的那些事儿 (0)
• 2010/03/05 -- 删除残破的图片（Broken Images），基于 MooTools or jQuery (0)
• 2010/02/05 -- 网页换肤,基于MooTools or jQuery (1)
• 2010/02/03 -- Google-Style之元素褪色（Element Fading），基于MooTools or jQuery (0)
• 2009/12/02 -- 在网站外部链接旁边添加Favorite Icons的方法，基于MooTools or jQuery (0)
• 2009/11/10 -- 学会做一个简易的 Tooltip 效果，基于 MooTools or jQuery (3)
• 2009/11/04 -- 创建一个‘精灵’导航菜单，基于 CSS Sprites And MooTools or jQuery (0)
• 2009/09/24 -- 模仿Flickr的下拉导航条，基于MooTools & jQuery实现的 (0)

本文系统的介绍了CSS Sprites的概念、用途和用法，相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

什么是CSS Sprites？

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要
同时保持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上，并且通过简单的程序或硬件即可正确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有单独占用内存，所以被取名为“Sprite精灵”。

上图是口袋妖怪的组合图片，可以点这里欣赏更多。不是加载每个但以图片

时间进行到2000年，Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生，它基于同上文提到的游戏Sprite同样的原理，并且使用CSS更容易控制，很快的流行开来。

2004年，Dave Shea 提出了一种使用CSS控制组合图片的方案 ，将许过小的图片组合在一起，使用css定义背景属性，来控制图片的显示位置和方式。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites用在哪里？

CSS Sprites可以用在很多场合，大型网站可以将许多单独的图片，以有机的方式组合起来，从而使其便于维护和更新。图片之间通常会留出较大的空白，使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。所以，你需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目 的方式。

下面是一些CSS Sprites的使用范例：

Xing

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites：

Amazon
亚马逊使用的大幅、整齐巧妙的CSS Sprites：

Apple
苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果：

YouTube

YouTube使用了一个2008像素高的CSS Sprites：

CNN
CNN使用了非常简单谨慎的方案：

Digg
Digg的方案比较复杂：

Yahoo
Yahoo将他们漂亮的图标等距离排布起来：

Google
Google使用了极其简化的方案：

Dragon Interactive
一个丰富多彩的CSS Sprites方案：

TV1.rtp.pt
一个很大很酷的CSS Sprites方案

CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

CSS Sprites: Image Slicing’s Kiss of Death

中文版 http://www.liquidroc.name/post/my_view_on_css_sprites.html

最权威的CSS Sprites介绍文章之一

CSS Sprites: What They Are, Why They’re Cool And How To Use Them
一片图文并茂的介绍文章

How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites
介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例。

What Are CSS Sprites?
又一片介绍文章

Sprite Optimization
Dave Shea的思考：是不是真的有必要简历复杂的大型CSS Sprites？答案是不！不要搞得太复杂，找到一个折中的方案才是正道。

Creating Easy and Useful CSS Sprites

一篇教程，其源文件可下载学习

Fast Rollovers Without Preload

一个快速翻转效果的例子

CSS Sprites + Rounded corners

另一个例子：使用CSS Sprites实现背景圆角

CSS Image Sprites

一篇教程

Optimize Your Website Using CSS Image Sprites

非常详细的教程，介绍了CSS Sprites的原理和应用方法。

Animated GIF For CSS Sprites

一个比较特别的应用

Image Sprite Navigation With CSS

怎样制作简单的悬停菜单效果

Advanced CSS Menu

还是悬停效果

Creating and Using CSS Sprites

一个非常基本的教程

CSS Sprites视频教程

How to Use CSS Sprites

David Perel解释了CSS Sprites的基本概念，并演示了如何在网页中使用它，长度：10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程，展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例，他将8幅图片组合在了一起，并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站，减少图片请求数量可以减轻服务器负担，这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites，你可以对一个对象的一小部分加载翻转效果，使用负值的背景图片位置( background-position )，你可以创建基于CSS的图像映射，下面的文章讲述了这一技术：

CSS Image Maps Using Sprites
一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

City Guide Map Using Sprites
另一个横向定位的例子

Advanced Map Using Sprites
一个更高级的技术。

CSS Sprites技术

CSS Sprites 2

Dave Shea 使用jQuery扩展了经典的CSS Sprites， 他的技术可以让不同的链接之间使用组合图片，即使用户禁用了Javascript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件，整理了Dave Shea的功能，并简化了初始化设置。

Background Repeat and CSS Sprites
什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置，可以让你快速制作翻转按钮的背景图片。

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术，并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.”

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery，实现了“打开页面”的效果

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

CSS Sprite 制作工具

Data URI Sprites

DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具，它可以最大限度的帮助你减少背景图片的数量，减少请求数。

Spritr

一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像，调整图像精度，确定横向和纵向偏移，指定背景色和透明度，指定CSS前缀等众多功能。

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像，有一个工具可以自动为你设置CSS Sprites，这里是PHP 版本 ，它是开源的，具体可以看： Chris Brainard’s Sprite Creator 1.0.

附：CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范，background-position属性包含了两个(可选的)变量：水平位置(horizontal)和垂直位置(vertical)，例如：

1
2
3
4

.introduction { 
   background-image: url(bg.gif);
   background-position: [horizontal position] [vertical position]; 		
}

使用这个属性，你可以定义块级元素的背景图像位置，可以使用%百分比或px像素为单位来定义图像开始的位置，也可以使用关键字：top
left, top center, top right, center left, center center, center right,
bottom left, bottom center, bottom right.

在“ background-position: x% y%;  ”这样一个语句中，x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默认的是50%。

例如，你可以这样定义：

1
2
3
4

ul li {  
   background-image: url(bg.gif);  
   background-position: 19px 85px;  
}

这样背景图片就被定位到了距离左侧19像素，距离上边85像素。

关于这个属性，可以在这里找到更详细的资料：background-position (CSS property) 。

英文原文：Smashing Magazine
中文翻译：Oncoding编码营

相关日志 »

• 2010/01/25 -- Sexy Bookmarks 效果，基于CSS (0)

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也 都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。

避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。

CSS的优先级

在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题

当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。

那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

1. 第一个数字(a)通常就是0，除非在标签上使用style属性；
2. 第二个数字(b)是该选择器上的id的数量的总和；
3. 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
4. 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
5. 通用选择器(*)是0优先级；
6. 如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

让我们看几个例子，这样或许比较容易理解些：

• #sidebar h2 — 0, 1, 0, 1
• h2.title — 0, 0, 1, 1
• h2 + p — 0, 0, 0, 2
• #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

• #sidebar p#first { color: red; } — 0, 2, 0, 1
• #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本理解优先级是如何工作的是很重要的，但是一些工具比如Firebug，在我们审查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元素上哪个选择器是有效的是很有用的。

让你非常容易的看到那个选择器作用于一个元素上了。

有用的文章:

• CSS Specificity: Things You Should Know
• Link Specificity¯MeyerWeb
• CSS: Specificity Wars
• Assigning property values, Cascading, and Inheritance—W3C

1. 属性选择器

属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

有6个不同类型的属性选择器：

• [att=value]
  该属性有指定的确切的值。
• [att~=value]
  该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
• [att|=value]
  属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)
• [att^=value]
  该属性的值以指定值开始。
• [att$=value]
  该属性的值包含指定的值(而无论其位置)。
• [att*=value]
  该属性的值以指定的值结束

比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：

1
2
3

div[class|="post"] {
   background-color: #333;
}

该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)

属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：

1
2
3

input[type="text"] {  	
     width: 200px;  	
}

这将匹配所有type属性值等于“text”的input元素。

现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：

1
2
3
4
5
6
7
8
9
10
11
12

a[href*=".jpg"] {
  	background: url(jpeg.gif) no-repeat left 50%;  	
   padding: 2px 0 2px 20px;  	
}     
a[href*=".pdf"] {  	
   background: url(pdf.gif) no-repeat left 50%;  
	padding: 2px 0 2px 20px;  	
}     
a[href*=".doc"] {  	
   background: url(word.gif) no-repeat left 50%;  	
   padding: 2px 0 2px 20px;  
}

在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》

浏览器支持

除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。

2. 子选择器

子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：

1
2
3

div#sidebar > h2 {
  	font-size: 20px;  	
}

你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素(比如你想匹配主要的div内的blockquotes，而不是其它部分的：

1
2
3

body > div > div blockquote {
  	margin-left: 30px;  	
}

浏览器支持

和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。

3. 兄弟组合

有两类兄弟组合：临近兄弟组合和普通兄弟组合

临近兄弟组合

该选择器使用加号“+”来链接前后两个选择器。选择器中的元素有同一个父亲，而且第二个必须紧紧的跟着第一个。

临近兄弟组合可以灰常有用，比如，在处理文字的时候。比如我们想对段落后面的h2标题添加一个顶间距“margin-top”(当然或许你无需为h1标签后面的h2添加，或者它可能是页面的第一个元素)：

1
2
3

p + h2 {
  	margin-top: 10px;  	
}

你甚至可以更加具体，你想定位某个特定的div后面的h2：

1
2
3

div.post p + h2 {  	
   margin-top: 10px;  	
}

或者你可以搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母。

1
2
3

.post h1 + p:first-line {
  	font-variant: small-caps;  	
}

因为可能大部分日志/文章的第一个段落都会紧紧的在H1标签的后面。你可以在你的选择器中借助于h1标签。

普通兄弟组合

普通兄弟组合和临近兄弟组合的工作原理很像，不同的是第二个选择其无需紧紧跟随第一个。

如果你需要定位所有的某个特定的div里面并且跟在h1标签后面的p标签的话(你可能想要这些p标签比拟的日志的标题前面的文字大些)，你就可以使用这个选择器：

1
2
3

.post h1 ~ p { 
 	font-size: 13px;  	
}

注：这两个选择器太像了，所有不是很好理解，可以试一试下面的这个例子：

The CSS:

1
2

p + h2{color:red;}  	
p ~ h2{font-weight:700;}

The HTML:

1
2
3

<p>咳咳，内容。</p>  
<h2>标题1</h2>  
<h2>标题2</h2>

看看第二个h2的颜色就可以理解了吧？临近兄弟组合只能匹配第一个选择器后面的第一个兄弟选择其，普通兄弟组合则能匹配所有。

注：该部分英文原文没有，是神飞翻译时自己添加。

浏览器支持

Internet Explorer 6依然不能理解兄弟选择器，但是，另一种情况，如果你的用户中只有一小部分是IE6用户，而且网站的结构不会被破坏或者受到严重影响，这是实现很多很酷的效果而无需在你的HTML代码中添加无用的class或id。

4. 伪类

动态伪类

之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类：链接 和用户行为。链接就是:link 和:visited，而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中，这几个应该是最常用到的。

:link伪类用于链接尚未被用户访问的时候，而:visited 伪类用于用户访问过的链接，也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后，:focus伪类用于元素成为焦点的时候——最常用于表单元素。

你可以在你的样式表中使用多种用户行为动态伪类，这样你就可以，比如，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不同的背景色:

1
2
3
4
5
6
7
8

 
input:focus {
  	background: #D2D2D2;
  	border: 1px solid #5E5E5E;  	
}  
input:focus:hover {
  	background: #C7C7C7;  	
}

浏览器兼容性

动态伪类被所有的现代浏览器支持，甚至IE6，但是请注意，对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。

:first-child

:first-child伪类允许你定位某个元素第一个子元素。比如，如果你想给你的无须列表的第一个li添加一个margin-top，你就可以这样写：

1
2
3

ul > li:first-child {
  	margin-top: 10px;  	
}

让我们来看一看另一个例子:比如你想让你的博客的侧栏的H2标签都有个顶部边距，以将标题和它们前面的内容区分开来，但是第一个h2不需要，你就可以使用下面的代码：

1
2
3
4
5
6

#sidebar > h2 {
  	margin-top: 10px;  	
}
#sidebar > h2:first-child {
  	margin-top: 0;  	
}

浏览器兼容性

IE6 不支持 :first-child 伪类。根据伪类应用到的设计的不同，它或许不会成为关注的主要问题。比如，如果你使用:first-child 选择器来移除标题或段落上的头部或底部的间距，你的布局在IE6中不会坏掉，它只会看起来有些不同。但是如果你使用:first-child选择器从一 个，比如浮动元素，移除左边距或右边距，将会让你的设计乱掉。

语言伪类

语言伪类:lang()，允许你匹配一个基于它的语言的元素。

你如，你想让你的网站的某个特定的链接根据页面的语言有不同的背景颜色：

1
2
3
4
5
6

:lang(en) > a#flag {
  	background-image: url(english.gif);  	
}     
:lang(fr) > a#flag {
  	background-image: url(french.gif);  	
}

这个选择器将会匹配相关的链接——如果页面的语言等于“en”或“fr”，或者以“en”或“fr”开头并在后面带个连字符“-”的话。

浏览器兼容性

不幸的是，只有IE浏览器中只有IE8支持该选择器，其它的主要浏览器都支持该伪类选择器。

5. CSS 3 伪类

:target

当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使 用:target伪类来控制目标的样式。

举个例子，比如你有一个很长的使用了很多文字和h2标题的页面，然后在页面的头部有一个对这些标题的索引。如果在点击索引内的某个链接时，相应的标题以某种方式高亮，然后滚动到相应的位置，对读者就会很有用。很简单。

1
2
3

h2:target {
  	background: #F2EBD6;  	
}

浏览器兼容性

这一次，IE浏览器完全不支持:target伪类，另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。但是其它的各个主流浏览器都支持该选择器。

UI元素状态伪类

有些HTML元素有enable 或disabled 状态(比如，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。

那么你就会想，如果任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框：

1
2
3
4

input:disabled {
  	border:1px dotted #999;
  	background:#F2F2F2;  	
}

你也可能会想让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来)：

1
2
3

input[type=”checkbox”]:checked {
  	margin-left: 15px;  	
}

浏览器兼容性

所有的主流浏览器，除了我们常常不报希望的IE系列浏览器，都支持UI元素状态伪类。如果你考虑只是添加附加级别的细节和增强网站的可用性，这个仍然是可以采用的。

6. CSS 3 结构伪类

:nth-child

:nth-child()伪类允许你定位某个父级元素的一个或多个特定的子元素.

你可以通过定义它的值为一个整数来定位某个单个子元素：

1
2
3

ul li:nth-child(3) {
  	color: red;  	
}

这将会让ul元素的第三个li元素的文字变成红色。注意如果在ul里面有个其它类型的元素(不是li)，它也会算作其子元素。

你可以使用表达式来定位子元素。比如，下面的表达式将从第四个开始匹配每第三个元素。

1
2
3

ul li:nth-child(3n+4) {
  	color: yellow;  	
}

在上面的这个例子中，第一个黄色的li元素将会是第四个。如果也想从第一个开始匹配，你可以使用一个简单的表达式：

1
2
3

ul li:nth-child(3n) {
  	color: yellow;  	
}

这样的话，第一个黄色的li元素将会是第三个子元素，然后是它后面的每隔第三个。现在想象一下如果你只想匹配列表中的前四个子元素：

1
2
3

ul li:nth-child(-n+4) {
  	color: green;  	
}

:nth-child的值同样也可以被定义为“even” 或“odd”，和“2n” (第偶数个) 或“2n+1” (第奇数个)的效果是一样的。

:nth-last-child

:nth-last-child伪类基本上和:nth-child伪类的作用相同，但是它从最后一个元素开始算。

使用上面的一个例子来看看：

1
2
3

ul li:nth-child(-n+4) {
  	color: green;  	
}

不是匹配最前面的四个li元素，该选择器匹配最后面的四个元素。

你同样可以使用“even” 或“odd”只，同样与nth-child不同的是，这是从最后面的元素开始算的：

1
2
3

ul li:nth-last-child(odd) {
  	color: grey;  	
}

:nth-of-type

:nth-of-type伪类和:nth-child也很像，不同的是它只计算选择器中指定的那个元素。

这对定位元素中包含大量不同的元素的情况会很有用。比如，我们想控制一个文本块中的每隔一个段落，但是我们又想要无视其它元素比如图片和引用块：

1
2
3

p:nth-of-type(even) {
  	color: blue;  	
}

你也可以使用一些值，就像在:nth-child中使用的一样。

:nth-last-of-type

你能猜到它吧？！:nth-last-of-type 伪类可以像前面提到的:nth-last-child一样使用，但是这次，它将之匹配你在选择器中指定的元素类型：

1
2
3

ul li:nth-last-of-type(-n+4) {
  	color: green;  	
}

我们可以更加的聪明一些，在一个大的块级选择器中结合多种这样的伪类。比如我们想让文章中的所有的图片左浮动，除了第一个和最后一个(我们可以假设他们是满宽的，无须浮动)：

1
2
3

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
  	float: left;  	
}

所以在这个选择器的第一部分，我们从第二个图片开始定位每一个图片。在第二部分中，我们定位所有的图片，除了最后一个。因为这两个选择器并非互斥的，我们可以同时使用它们，这样就可以一下子排除第一个和最后一个元素！

:last-child

:last-child伪类的作用类似于:first-child 伪类，但是会定位父级元素的最后一个子元素。

让我们假设你不想让你的日志的div的最后一个段落也有一个底部边距：

1
2
3

.post > p:last-child {
  	margin-bottom: 0;  	
}

该选择器将定位class为”post”的元素的最后一个直接子级段落。

:first-of-type 和:last-of-type

:first-of-type 伪类用于定位一个父级元素下的第一个同类子元素。

比如，你可以定位某个特定的div的第一个子级段落(p)，并让其第一行字母大写:

1
2
3

.post > p:first-of-type:first-line {
  	font-variant: small-caps;  	
}

在这个选择器中，你可以确定你是在只定位class为”post”的元素的直接子级p元素，而且还是匹配第一个子级p元素。

:last-of-type伪类与此类似，只是匹配最后一个子元素。

: only-child

: only-child伪类表示一个元素是它的父级元素的唯一一个子元素。

比如说，你有一些盒子(“news”)，里面有一些文字段落，当你有多于一个段落的时候，你想让文字比只有一个段落的时候小一些：

1
2
3
4
5
6

div.news > p {
  	font-size: 1.2em;  	
}     
div.news > p:only-child {
  	font-size: 1.5em;  	
}

第一个选择器中，我们定义”news”div的所有子级p元素的字体大小。在第二个中，我们覆盖之前的字体大小，如果该p元素是“news” div的唯一子元素的时候，它的字体大小会比较大一些。

: only-of-type

: only-of-type伪类表示一个元素是它的父级元素的唯一一个相同类型的子元素。

这有用什么用？假设你有一些日志，每一篇都有个class为”post”的div，他们中的一些有多于一张图片，但是有些可能就只有一张图片。你想让后者中的图片水平居中，而在其它的有多于一张图片的日志中，就将它左浮动。这个需求用这个选择器就很容易实现：

1
2
3
4
5
6
7

.post > img {
  	float: left;  	
}     
.post > img:only-of-type {
  	float: none;
  	margin: auto;  	
}

:empty

:empty伪类表示一个元素里面没有任何内容。

这个选择器可以用很多种用途。比如，你在你的“sidebar”中有若干个盒子，但是不想让空盒子显示出来：

1
2
3

#sidebar .box:empty {
  	display: none;  	
}

注意，就算”box”div里面只有一个空格，它也不会被css当作空标签的，这样就不能匹配该选择器了。

浏览器支持

Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器中指出这些选择器。这意味着，使用这些选择器对网站的可用性和可访问性是很有用的，或者如果网站的用户中的大部分是使用IE而且你不想在某些细节上无视他们，最好还是保持使用通用的class和简单的选择器来迎合这些选择器。否则你会被搞疯的！

7. 否定选择器

否定选择器:not()，可以让你定位不匹配该选择器的元素

比如，如果你需要定义表单元素中的input元素，但是又不想包括submit类型的input的时候会灰常有用——你想它们有不同的样式，以看起来像按钮：

1
2
3
4
5

input:not([type="submit"]) {
  	width: 200px;
  	padding: 3px;
  	border: 1px solid #000000;  	
}

另一个例子，你想你的日志的div中的所有段落(p)有比较大的字体，除了表示时间和日期的段落：

1
2
3

.post p:not(.date) {
  	font-size: 13px;  	
}

你可以想象这个选择器能带给你的潜力了吧，你能够从你的CSS文件中剥离(剔除)的无用的大量选择器也被它广泛支持吗？

浏览器支持

Internet Explorer在这里常常是让我们感到扫兴的东西：一点都不支持，甚至在IE8中。这大概意味着这些选择器将仍不得不等到一些开发者开始不再顾虑将它添加到他们的样式表中才会普及。

8. 伪元素

伪元素允许你操作HTML中不是真实存在的元素，比如一个文本块的第一行或者第一个字母。

伪元素在CSS 2.1中就已经存在，但是CSS 3说明书表示他们应该使用双冒号“::”，以与伪类区分开来。在CSS 2.1中，他们也是使用单个冒号“:”的。浏览器会将能够接受两种格式，除非这些伪元素只存在于CSS3中。

::first-line

::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行

这对在你的文字块上添加一些微妙的排版细节相当有用，比如，将一片文章的第一行文字改成小写字母：

1
2
3

h1 + p::first-line {
  	font-variant: small-caps;  	
}

如果你专心的阅读了我们前面的内容，你将会了解到上面的语法意味着，紧紧的跟在H1标签之后(+)的段落会将其第一行文字显示为小写字母。

你也可以针对相关的div的第一行，而不用针对实际的段落标签(p):

1
2
3

div.post p::first-line {
  font-variant: small-caps; 
}

或者更进一步，定位某个特低的div的第一个段落的第一行：

1
2
3

div.post > p:first-child::first-line {
  	font-variant: small-caps;  	
}

这里，“>”符号表示你指定的是post div的直接子级元素，这样如果段落被包括在第二级div中，它就不会匹配这个选择器。

::first-letter

::first-letter伪元素将会匹配一个文本块的第一个字母，除非在同一行里面包含一些其它元素，比如图片。

和::first-line伪类一样，::first-letter通常用于给文本元素添加排版细节，比如下沉字母或首字母。

这里是如何使用::first-letter伪元素创建首字下沉的例子:

1
2
3
4
5
6
7

p {
  	font-size: 12px;  	
}     
p::first-letter {
  	font-size: 24px;
  	float: left;  	
}

注意如果你在某些元素中同时使用::first-line 和::first-letter ，::first-letter 属性将覆盖从::first-line中继承下来的某些属性。

如果你不知道W3C规则的话，这个元素有时会产生意想不到的结果：它事实上是使用最长的规则的选择器！所以如果你计划使用它的话最好仔细的阅读一下 (其它选择器也一样)。

::before 和 ::after

::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。

这些元素将继承它们将附加的元素的大部分属性。

假设你想在你的页面中的图标的描述前面添加文字“Graphic number x:”。你将无需写文字“Graphic number”，或者自己手动添加数字：

1
2
3
4
5
6
7
8

.post {
  counter-reset: image;
} 
   
p.description::before {
  content: "Figure number " counter(image) ": ";
  counter-increment: image;  	
}

那么这会产生什么？

首先，我们告诉HTML来创建“image”计数器。比如我们可以添加该属性到页面的body。同样我们也可以给该计数器起任何一个名字，只要你想，只要我们常常使用同样的名字引用它：自己试试吧！

那么我们想在class为”description”的每一个段落之前添加这一块内容: “Figure number ” — 注意只有我们在引号里面写的内容才会被创建到页面中，所以我们也要添加一个空格！

然后，我们就有了counter(image):这将用到我们之前在.post选择器中定义的属性。它默认会从数字1开始。

下一个属性在那里表示计数器知道对于每一个p.description，它需要将image计数器增加1 (counter-increment: image)。

它并不像看起来的那么复杂，而且还会灰常的有用。

::before和::after伪元素常常只使用content属性，来添加一些短语或排版元素，但是这里我们展示了我们如果以一种更加强大的结合counter-reset和counter-increment属性的方式来使用它们。

有趣的是: ::first-line 和::first-letter 伪元素可以匹配使用::before伪元素生成的内容，如果存在的话。

浏览器支持

如果使用单个冒号的话(比如, :first-letter, 而不是::first-letter)，这些伪元素被IE8支持(但是不被IE7或6支持)。但是左右其他的主流浏览器都支持这些选择器。

结语

乏味的讲述终于结束了，现在该你来领悟本文的要义并自己尝试了: 开始通过创建实验性的页面并测试所有的这些选择器，在有疑问的时候返回这里并确保总是遵循W3C的规则，但是请不要只是坐在那里想这些选择器尚未被完全支持你就无视它们。

如果你敢于冒险，或者你不害怕放弃之前的遍地无用和非语义化的class和id，为什么不尝试一两个这些强大的CSS选择器到你的下一个项目中呢？我们保证你不会回头的！

参考

• CSS 2 Selectors — W3C
• CSS 3 Selectors Level 3 — W3C
• Comparison of layout engines (Cascading Style Sheets) — Wikipedia
• Generated content, automatic numbering, and lists — W3C

扩展资源

• Keeping Your Elements’ Kids in Line with Offspring — A List Apart
• Selectutorial – CSS selectors
• A Look at Some of the New Selectors Introduced in CSS3
• CSS 2.1 selectors, Part 1 and Part 2
• CSS 3 selectors explained
• CSS selectors and pseudo selectors browser compatibility
• 10 Useful CSS Properties Not Supported By Internet Explorer
• Styling a Poem with Advanced CSS Selectors

相关日志 »

• 2009/09/21 -- CSS3的新功能快速体验和应用 (0)
• 2009/09/01 -- CSS 3.0 中文参考手册 & CSS3系列教程 (0)
• 2010/09/02 -- 图像替换技术的最佳实战 (2)
• 2010/05/06 -- CSS3 和 HTML5 兼容性测试 (3)
• 2010/04/15 -- CSS中区别IE6, IE7和 IE8 的4个非常有用的字符 (1)
• 2010/03/22 -- 简单的斑马纹表格 (2)
• 2010/03/04 -- Web 设计中的 5 个最具争议性的话题 (0)
• 2010/01/26 -- 网页设计中的面包屑导航：实例和最佳做法 (0)
• 2010/01/25 -- Sexy Bookmarks 效果，基于CSS (0)
• 2010/01/25 -- 15个富有创意的Web表单设计,基于CSS (0)