芒果小站 » CSS

抛弃 CSS Hacks 后的浏览器兼容方案

芒果 — Wed, 16 Nov 2011 13:27:47 +0000

如果你看过之前发在芒果小站的《CSS 忍者：安全的 CSS hacks 秘籍》这篇文章，应该基本清楚了通过 IE 条件注释替代 CSS Hacks 的技巧。最近考虑在项目中实际应用这个方案。

一般情况下的浏览器兼容需要考虑 IE6/7/8 三种 IE 版本，当然在 IE9 开始逐步推向市场后，又会有更多的衍生版本。所以我目前只考虑 IE7~9 版本的兼容情况。涉及到的条件注释代码如下：

使用说明如下：

.test {
    /* 针对非 ie 浏览器的样式 */
}
.ie .test {
    /* 针对所有 ie 版本的样式 */
}
.ie6 .test {
    /* 针对 ie6 的样式 */
}
...
.ie9 .test {
    /* 针对 ie9 的样式 */
}

之前那篇文章里也有同学提出通过 PHP 判断 UA 参数并动态输出样式表的方法，这个虽然是简洁明了，但和后端代码耦合在一起，总觉得不是一回事。况且实际应用中很多情况下会将页面模板化，做动态输出并不非常适合。

另外，国内各大双核高速安全的壳浏览器还没有经过测试，这个需要再做了解。

2011.11.18 日补充：

附上一份 demo，请使用不同版本 ie 浏览器预览该演示页面：cross_browser_compatible_no_css_hacks.html

纯英文纯数字 CSS 强制折行

芒果 — Tue, 15 Nov 2011 04:32:29 +0000

文字折行经常被测试拿来当 bug 提，这种蛋疼的事情还是写个公共类了事吧！

.break-word {
    word-wrap: break-word;
    break-word: break-all;
}

让 Chrome 崩溃的 CSS 代码

wwf — Tue, 06 Sep 2011 12:13:45 +0000

background-image: -ms-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #78AAF6 100%);
background-image: -moz-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #78AAF6 100%);
background-image: -o-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #7BACFC 100%);
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 480, color-stop(0, #4B8BEE), color-stop(1, #78AAF6));
background-image: -webkit-radial-gradient(center bottom, ellipse closest-corner, #4B8BEE 0%, #78AAF6 100%);
background-image: radial-gradient(center bottom, ellipse closest-corner, #4A8BEE 0%, #78AAF6 100%);

demo 地址，请用 chrome 浏览
mark下

自定义文件上传控件样式（兼容 IE6）

芒果 — Wed, 22 Jun 2011 10:31:42 +0000

要想直接通过 CSS 来控制文件上传控件，基本没戏的。当然也有一些解决方案，例如 Mr.Think 的这篇文章《利用label标签和CSS美化文件上传表单(不兼容IE6)》。昨天也恰好遇到了这个问题，顺手记录下吧。

首先，给元素戴个套子，这样比较安全嘛，是不是？看代码：

浏览...

有了这个安全的外层容器，我们就可以开搞了。问题的核心有两点：第一，把丑陋的原生上传控件给藏起来；第二，支持点击上传功能。

关键的代码片段：

.input-file {
overflow:hidden;
position:relative;
}

.input-file input{
opacity:0;
filter:alpha(opacity=0);
font-size:100px;
position:absolute;
top:0;
right:0;
}

其中，字体大小 100px 的原因在于放大上传控件右侧的按钮区域，结合靠右定位，能够保证鼠标 cursor 为 default 状态。

另外，如果要支持鼠标悬停效果，也是可以的，把 span 标签改成 a 标签，然后加上 hover 伪类就可以了。

浏览...

貌似是全兼容的？反正 IE 是可以的。自己看吧，懒得看兼容了。

猛击这里查看 Demo 稿：css_input_file.html

CSS 忍者：安全的 CSS hacks 秘籍

芒果 — Sun, 19 Jun 2011 08:59:24 +0000

你如何搞定 IE 这只难以驯服的怪兽？使用 CSS Hacks 或者条件注释么？恐怕没有什么解决方案是完美的。每个设计师或者前端码农都会有自己打败 IE 行之有效的方法。所有这些技术都各有利弊，让我们一起来看看。

通过条件判断引入样式表

使我们能很容易在 IE 浏览器中通过条件注释语句加载指定样式表，而其他非 IE 内核浏览器则自动忽略这段蹩脚的 HTML 注释。下面是一个例子：

这段代码会导致 IE8、IE7、IE6 各自加载对应的样式文件。这事实上是非常牛逼的，条件注释给按浏览器加载各自不同的样式表提供了可能，但同时需要维护多个样式文件。

CSS hacks

这事实上是个龌龊的做法，能解决问题又不符合规范，看着也很头大。大部分人看着它只能束手无策而又逼不得已。之前的《CSS Hacks for IE，IE 也可以很完美》已经谈过 IE 的 CSS hacks 了。现在可以来简单回顾一下常用的几个方法：

_selector{property:value;} //IE6
*selector{property:value;} //IE6 & IE7
selector{property:value\9;} //IE6 & IE7 & IE8

这个一般人都知道，就不多说了。但面临的一个现实问题是，\9 这个 hack 不只是针对 IE8 以及更老版本奏效，IE9 最终的发行版依旧会受到这个 hack 的影响。而 IE9 本身在 CSS 上的各种缺陷又是被修复的。如果将来 IE10、IE11 来了，那又怎么办？显然 \9 并不是一个严谨的安全的方案。

另外，采用不同的 X-UA-Compatible 模式也会影响不同版本的 IE 渲染差异。建议设置默认渲染模式如下：

IE=Edge">//标准 IE 模式

那咋整呢？咋整咋整咋整？没事，下面还有更绝的。

通过条件判断插入指定类

既然可以用条件判断，那么直接为不同 IE 版本输出单独用于设定样式的钩子类好了。直接上代码：

 // 非 IE 浏览器的情况，不添加任何作用类

如果要是 IE9、IE10 再想出现什么神奇的行为艺术的话，继续添加指定作用类就行咯。并且你的样式表也会变得异常干净、整洁、美观：

.selector { color: black; }
.ie8 .selector { color: green; } /* IE8 */
.ie7 .selector { color: blue; } /* IE7 */
.ie6 .selector { color: red; } /* IE6 */

当然，标准模式的 X-UA-Compatible 声明还是必须的，以防页面被强制按照低版本的 IE 来渲染。

关于条件注释的参考资料：http://msdn.microsoft.com/en-us/library/ms537512.aspx

12 款简化 CSS3 开发的实用工具

芒果 — Mon, 13 Jun 2011 04:00:49 +0000

CSS3 Pie

对于 IE6/7/8几乎不支持任何 CSS3 特性，我想大多数人都不会惊讶。不幸的是，有些客户可能需要您创建一个网站，能使得 IE 浏览器下看起来和高级浏览器中效果一致。这就是 CSS3 Pie 施展超能力的时候了：它允许你在 IE 下也能使用很多 CSS3 炫酷功能。
猛击这里访问 CSS3 Pie

CSS3 Builder

有了这个工具，你可以设计出和 Photoshop 效果完全一致的 CSS3 效果。这绝对是一个省时省力的伟大工具。
猛击这里访问 CSS3 Builder

CSS3 Drop shadow generator

这个工具和 CSS3 Builder 非常相似，只要使用滑杆来直观地设计自己的阴影效果。CSS 代码会自动创建，将其粘贴到你的 CSS 文件即可！
猛击这里访问 CSS3 Drop shadow generator

Cascader

此工具不单为 CSS3 设计，但它却非常有用。Cascader 让你输入一些 HTML 代码片段，它会侦测到所有的内联 CSS，把它从 HTML 中分离出来并自动关联 CSS 选择器。
猛击这里访问 Cascader

Border Radius.com

border-radius 是最流行的 CSS3 属性之一。那些切过各种圆角图片的设计师和工程师们当然知道为什么要有这个属性。此工具允许您快速创建一个容器，并得到相应的 CSS3 代码。
猛击这里访问 Border Radius.com

Button Maker

CSS3 使得创建漂亮的按钮更加容易。利用这个工具，CSS3 按钮设计就非常简单啦：只要选择颜色，调整半径，并获得代码，随时可以粘贴到你的 CSS 文件。
猛击这里访问 Button Maker

CSS3 Generator

需要 CSS3 特性的相关帮助？这款工具可以帮助您创建最流行的 CSS3 属性声明：@font-face、RGBA、text-shadow、border-radius 等等。
猛击这里访问 CSS3 Generator

Modernizr

Modernizr 是一个小脚本，用于检测客户端对 CSS3 的支持情况。它会在跟元素 <html> 上添加一个指定 class，让你可以针对特定的浏览器实现特定的样式。例如，如果浏览器不支持多背景，no-multiplebgs 类将被添加到 <html> 元素。这将容易地实现优雅降级。
猛击这里访问 Modernizr

HTML5 & CSS3 Support

要知道 Internet Explorer 8 是否支持 text – shadow 属性？只要有这份非常有用的图表，来告诉你主要浏览器对 CSS3 的支持。这绝对是一个必须收藏的网站！
猛击这里访问 HTML5 & CSS3 Support

CSS3 Gradient Generator

你大概可以猜到，这个工具是一个渐变生成器。只需通过色盘选取颜色，并在预览区预览，拷贝这份调整完成的代码，这是这么简单！
猛击这里访问 CSS3 Gradient Generator

CSS3 Please

CSS3 Please 是一个非常有用的站点，允许你复制和粘贴最通用的 CSS 声明。提供了一个预览区域，你可以在线调试你的代码。这个工具芒果小站之前有介绍过哦：CSS3 Please! CSS3 即时预览体验
猛击这里访问 CSS3 Please

CSS3 Cheat Sheet

当你编码的时候，参考手册是快速记忆语法特性的最有效方式，Smashing Magazine 创造了这个 CSS3 参考表，你可以下载和打印。
猛击这里访问 CSS3 Cheat Sheet

英文原稿：10+ useful tools to simplify CSS3 development | CatsWhoCode
翻译整理：12 款简化 CSS3 开发的实用工具 | 芒果小站

IE6 下的神奇 CSS 字体 bug

芒果 — Wed, 18 May 2011 14:21:05 +0000

一直用的 Aptana 当编辑器，这玩意儿有一个很强大的代码格式化功能。你看：

不过格式化后就出问题了，注意格式化后 font 属性的写法。问题出在 font 属性的合并写法，12px 和 1.5 之间除斜杠之外的空格，IE6 下会导致后面设置的 arial 字体不生效。也就是直接宋体了。诶，比尔盖茨啊，说你什么好呢~

如何使用 CSS3 伪类

芒果 — Thu, 28 Apr 2011 16:09:48 +0000

CSS3 是个好东西，但也很容易被她的变形（transform）和动画（其中许多特性因浏览器厂商而异）特性所迷惑，因而忘了那些已经被添加到标准规范中的最为基本的选择器。许多强大的新伪类选择器（最新的 W3C 规范中列出了 16 条）使得我们能够在新的标准范围内使用元素选择器。

在探讨这些新的 CSS3 伪类之前，先简要回顾追溯一下这些在 Web 应用中常常被误解的 CSS 选择器。

伪类简史

在 1996 年，当 CSS1 的规范完成后，一些伪类选择器已被囊括在内，其中许多你几乎每天都在使用。例如：

:link
:visited
:hover
:active

这些状态都可以被应用到某个元素，通常是以 “a:伪类名”的形式。令人难以置信的是，在 W3C 于 1997 年 12 月发布 HTML4 规范之前，这些伪类已经被极为广泛地使用了。

CSS2 来了

于是 CSS2 来了。其建议规范在两年之后的 1998 年 5 月发布。随之令人兴奋的是添加了 :first-child 和 :lang() 新伪类。

:lang

有许多种表示文档语言类型的方法，如果你使用 HTML5，很可能会直接在 DOCTYPE 声明之后放置语句（指定本地语种）。当然，你也可以使用 :lang(en) 伪类来修饰页面元素，对于语言动态变化的情况，这将非常有用。

:first-child

您可能已经在文档中使用 :first-child 属性。它通常用于添加或删除列表中第一个元素的上边框。奇怪的是，却没有 :last-child 这样的伪类与之对应。于是不得等到 CSS3 规范的对这两个兄弟伪类的支持。

为何使用伪类？

伪类如此实用的原因在于它们允许动态地设置内容样式。比如上面的例子，我们能够描述当用户与链接进行交互时，链接该如何呈现样式。正如我们看到的，新的伪类允许我们根据元素在文档中的位置或状态，动态地设置其样式。

16 个全新伪类已经成为 W3C 的 CSS 建议的一部分，它们被分成四组：结构伪类、UI 元素的状态伪类、一个目标（target）伪类和一个否定伪类。

W3C 是 CSS 之家

现在我们一起探究看看如何使用这 16 个新伪类选择器。我会使用和 W3C 相同的标识符来命名 CSS 类，比如 E 代表元素（element），n 表示数字（number），s 表示选择器（selector）。

示例代码

大部分新选择器都会给出参考示例，以便直观地看到代码呈现效果。这里会涉及一张适用于 iPhone 并且使用了 CSS3 伪类的表单。

请注意，这张表单中大部分样式可以使用 id 和类（class）选择器设定。即便如此，仍然可以使用新伪类针为这个表单锦上添花。点击这里查看页面示例


	
		Awesome Widgets
		All the cool kids have got one
	
	
		Where do we send your receipt?
		Email Address
		
	
	
		Personal Details
		
		First Name
		
		Initial
		
		Surname
		
	
	
		Payment Details
		Name on card
		
		Card number
		
		
		Expiry Date
		
		/
		
		Security code
		
		Would you like Insurance?
		
		Yes Please!
		
		No thanks

使用前和使用后的表单样式

1. 结构伪类

根据 W3C 规范，结构伪类用来做下面的事：

…允许选择位于文档树的额外信息，但不能用其他简单的选择器或组合选择器代替。

这意味着我们拥有了能根据选择器在文档中的所处位置，动态选择内容的选择器。那么让我们从文档本身开始，即 :root 伪类。

W3C 上的 Level 3 选择器

E:root

:root 伪类选择页面的根元素。十有八九根节点是元素，例如：

:root { background-color: #fcfcfc; }

除了给元素设定样式，这个伪类基本没什么价值，可能也就描述性稍强些：

html { background-color: #fcfcfc; }

回到那张 iPhone 表单，为其添加基本的文本和背景样式：

:root {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
background: url(…/images/background.png) no-repeat #282826; }

E:nth-child(n)

:nth-child() 选择器可能需要一些实践才能完全理解。最简单的记忆方法是使用关键词“奇数或偶数”（odd 或 even），因为在显示由行列组成的数据表格时，这将非常有用。例如，我们可以使用下列内容：

ul li:nth-child(odd) {
background-color: #666;
color: #fff; }

这将使无序列表中的每个奇数行高亮显示。您可能会发现在表格中使用这种技术非常方便。例如：

table tr:nth-child(even) { … }

:nth-child 选择器更明确灵活，因此，你可以选择列表的第三个元素，像这样：

li:nth-child(3) { … }

请注意 n 并不是从零开始，第一个元素是 :nth-child(1)，第二个是 :nth-child(2)，以此类推。

我们也可以利用一些简单的代数，使它变得更加精彩。考虑以下代码：

li:nth-child(2n) { … }

当我们以这种方式使用 n，它代表对所有正整数，直到文档耗尽可选择的元素。在这种情况下，它会选择下列列表项：

未选择元素 (2 × 0)
第 2 个元素 (2 × 1)
第 4 个元素 (2 × 2)
第 6 个元素 (2 × 3)
第 8 个元素 (2 × 4)
等等…

这实际上和使用 :nth-child(even) 完全一致。因此我们混入点东西：

li:nth-child(5n) { … }

对应选择的节点元素：

未选择元素 (5 × 0)
第 5 个元素 (5 × 1)
第 10 个元素 (5 × 2)
第 15 个元素 (5 × 3)
第 20 个元素 (5 × 4)
等等…

对于长列表或表格而言，也许这将很有用，也可能完全无用。我们还可以在这一公式中执行数字加减法：

li:nth-child(4n + 1) { … }

对应选择的节点元素：

第 1 个元素 ((4 × 0) + 1)
第 5 个元素 ((4 × 1) + 1)
第 9 个元素 ((4 × 2) + 1)
第 13 个元素 ((4 × 3) + 1)
第 17 个元素 ((4 × 4) + 1)
等等…

这里 SitePoint 指出了一个怪癖的功能，如果你将 n 设置为负值，则可以像这样选择前 x 项。

li:nth-child(-n + x) { … }

如果你期望选择前 5 项，可以这样写：

li:nth-child(-n + 5) { … }

对应选择的节点元素：

第 5 个元素 (-0 + 5)
第 4 个元素 (-1 + 5)
第 3 个元素 (-2 + 5)
第 2 个元素 (-3 + 5)
第 1 个元素 (-4 + 5)
未选择元素 (-5 + 5)
未选择元素 (-6 + 5)
等等…

如果你想要根据热门程度来列数据条目，并予以突出显示，也就是说，前十项可能是很有用的。

WebDesign & Such 创建了斑马样式示例，这应该是一个 :nth-child 的最佳实践。

使用 CSS3 设置表格的斑马样式

如果没有需要设置样式的表格，那么你可以 Webvisionary Awards 奖已经做的和使用：第n -孩子式交替其网站部分。这里的css：

如果你的表格都不需要设置样式，那么你可以像 Webvisionary Awards 那样，使用 :nth-child 设置网站区块的交替样式。CSS 代码如下：

section > section:nth-child(even) {
background:rgba(255,255,255,.1)
url("../images/hr-damaged2.png") 0 bottom no-repeat;
}

其效果很细微，但它增加了一个陈旧浏览器不支持的细节。

Webvisionary Awards 上使用的 :nth-child 选择器

iPhone 表单案例

继续回到那张 iPhone 表单案例，这个案例中几乎很少地方可以使用 :nth-child 伪类，但值得注意的一点是，我们期望对前三个字段集的 label 标签隐藏，取而代之使用占位符（placeholder）文本替代。CSS 代码如下：

form:nth-child(-n+3) label { display: none; }

这里，我们寻找

元素的前三个子节点，然后选取 label 元素，可以使用 display:none; 来隐藏。

E:nth-last-child(n)

我们并不仅仅满足于 :nth-child() 伪类，W3C 也给我们提供了 :nth-last-child(n) 伪类。它和 :nth-child() 的表现非常相似，除了反向操作，从最后一个向开始计算的功能。

li:nth-last-child(1) { … }

上述将选择列表中的最后一个元素，而下面将选择倒数第二个元素：

li:nth-last-child(2) { … }

当然，你也可以使用其他规则：

li:nth-last-child(2n+1) { … }

但你可能更倾向于使用以下方法选择最后五个列表元素（以上面讨论的逻辑为基础）：

li:nth-last-child(-n+5) { … }

如果这仍然没有太大的意义，Lea Verou 创造了一个有用的 CSS3 结构伪类选择器测试工具，值得一试。

CSS3 结构伪类选择器测试工具

iPhone 表单案例

在案例中，我们可以使用 :nth-last-child 来为“Card number”字段添加圆角。以下 CSS 代码可能过于具体，但至少提供了一个关联伪类的方法：

fieldset:nth-last-child(2) input:nth-last-of-type(3) {
border-radius: 10px; }

我们首先抓住倒数第二个字段，选择其中倒数第三个字段（这个案例中，是“Card Number”字段）。然后，我们添加一个圆角效果（border-radius）。

:nth-of-type(n)

现在我们将做得更加具体，只为特定类型的元素设定样式。例如，假设你想使得文章第一段具有较大的字体。CSS 代码如下：

article p:nth-of-type(1) { font-size: 1.5em; }

也许你要文章中的部分图片右对齐，另一部分左对齐。则可以使用关键字来控制：

article img:nth-of-type(odd) { float: right; }
article img:nth-of-type(even) { float: left; }

通过 :nth-child() 和 :nth-last-child(), 你可以使用代数表达式：

article p:nth-of-type(2n+2) { … }
article p:nth-of-type(-n+1) { … }

值得记住的是如果需要获得这些指定的目标元素，使用描述性的 CSS 类名可能更合理。

Simon Foster 创建了一个关于 45 张 RPM 唱片集的漂亮图表，并且使用 :nth-of-type 来为某些数据设置样式。以下是他的代码片段，CSS 中各流派类型都做了区分。

ul#genre li:nth-of-type(1) {
  width:32.9%;
	background:url(images/orangenoise.jpg);
}
ul#genre li:nth-of-type(2) {
  width:15.2%;
	background:url(images/bluenoise.jpg);
}
ul#genre li:nth-of-type(3) {
  width:13.1%;
	background:url(images/greennoise.jpg);
}

网站上是这样呈现的：

For the Record 中的 :nth-of-type 选择器应用

iPhone 表单案例

比方说，我们希望偶数序号的输入框元素有底部圆角。可以用 CSS 实现这一点：

input:nth-of-type(even) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

该案例中，我们只期望应用到 “payment” 字段，因为个人信息含有三个文本输入框。处理方法有些棘手，要确保不会选择任何单选框。最终 CSS 代码：

#payment input:nth-of-type(even):not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid #999;
margin-bottom: 10px; }

我们将稍后讲解 :not 伪类。

:nth-last-of-type(n)

现在来看看 :nth-last-of-type() 从选定元素的末尾开始，并且倒序工作。

要选择文章的最后一段，可以这样使用：

article p:nth-last-of-type(1) { … }

当文章不确定是否以段楼你可能会选择这个选择器来代替 :last-child 伪类。

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

如果 :nth-of-type() 和 :nth-last-of-type() 对你而言不太灵活，你可以使用更简单的选择器取而代之，例如：

article p:nth-of-type(1) {
font-size: 1.5em; }

也可以这么搞：

article p:first-of-type {
font-size: 1.5em; }

正如你所期望的那样，使用 :last-of-type 效果完全一样，只不过从后续元素开始查找而已。

iPhone 表单案例

我们可以在这张表单中结合使用 :first-of-type 和 :last-of-type，特别是用于制作圆角。CSS 如下：

fieldset input:first-of-type:not([type=radio]) {
border-top-left-radius: 10px;
border-top-right-radius: 10px; }

fieldset input:last-of-type:not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

第一行 CSS 对所有具有 :first-of-type 伪类的 input 元素增加了圆角上边框，并且所在字段不是单选按钮。第二行对字段内的最后一个 input 元素增加圆角下边框。

:only-of-type

还有另一个选择器 :only-of-type()。用于选择那些和它父元素中与自身同类型的元素。例如下面的代码：

p {
font-size: 18px; }

以及：

p:only-of-type {
font-size: 18px; }

第一个选择器将影响到页面中的所有 p 元素，第二个选择器只会影响它父亲节点下的所有 p 元素。

如果数据库查询只返回一个结果数据，为这个内容设置样式时，用 :only-of-type 可能会很方便。

Devsnippet 创建了一个 Demo，说明如何在多个图片中为单个图片定义样式。

Devsnippet’s 的 :only-of-type 案例

iPhone 表单案例

这张表单中，我们可以确保所有输入字段，无论在顶部还是底部，都有圆角效果，并且是该输入字段的唯一子节点。CSS 代码如下：

fieldset input:only-of-type {
border-radius: 10px; }

:last-child

这是一个奇怪的地方：:first-child 是 CSS2 的规范，但 :last-child 却在 CSS3 中才出现。也不需要过多语言解释，:last-child 用于选择父元素下的最后一个子节点。例如：

li {
border-bottom: 1px solid #ccc; }

li:last-child {
border-bottom: none; }

这是一个从列表底部消除边框的有用方法，在 WordPress 小工具中可以经常看到这种应用。

Rachel Andrew 在他的 Cleaner Code With CSS3 Selectors 文章里谈论了 :last-child 和其他 CSS 伪类。他告诉我们如何使用这个伪类创建一份良好格式的图片画廊，而无需额外的 CSS 类。

Rachel Andrew 的 :last-child 伪类使用案例

:only-child

如果某个元素是它的父节点的唯一子节点，那么你可以使用 :only-child 选择它。不像 :only-of-type 伪类，并且和元素类型无关。例如：

li:only-child { … }

我们可以使用它来选择

:empty

最后，结构伪类中，我们还有一个 :empty。毫不奇怪，这个选择器只会选择那些没有子节点和文本节点的元素。如果从数据库中动态输入内容进行处理，这可能会非常有用。

#results:empty {
background-color: #fcc; }

您可以使用该伪类来让用户注意搜索无结果的情况。

2. 目标伪类

:target

这是我最喜欢的伪类之一，因为它使我们可以基于 URL 对页面元素定义样式。如果 URL 有一个标识符（即带有一个 # 符号），那么 :target 伪类将为以该标识符为 id 属性的元素设置样式。比如以下的链接：

http://www.mangguo.org/how-to-use-css3-pseudo-classes#summary

id 属性为 summary 的区块现在可以这样设置样式：

:target {
background-color: #fcc; }

对于已经被元素外部链接指向的页面元素来说，这是一个伟大的举措。你也可以使用它来高亮加了锚点的内容。

或许，最令人印象深刻的 :target 使用案例是 Corey Mwamba 的绿色滚动网站。他使用了一些富有创意的 CSS3 和 :target 伪类来创建动态的 Tab 导航效果。Demo 稿中包含了一些 CSS3 的巧妙用法，说明了伪类如何和其他 CSS 选择器结合使用。

Corey Mwamba 的绿色滚动网站

另外还有一个有趣的例子 Web Designer Notebook。利用了 :target 和 Webkit 动画来高亮目标 div 中的大块文本。Chris Coyier 还创建了一个基于 :target 伪类的 Tab 系统，发布在 CSS-Tricks 站点上。

iPhone 表单案例

这如我的 Demo 那样，我在顶部添加了一个导航栏，用于锚点定位到不同的表单区域。我们可以高亮任何区块：

:target {
background-color: rgba(255,255,255,0.3);

-webkit-border-radius:
10px;}

3. UI 元素状态伪类

:enabled 和 :disabled

UI 元素伪类包括 :checked，:enabled，:disabled 三个。可以允许根据元素状态来设定样式（通常是表单元素）。状态可以由用户设置（:checked）或由开发者设置（:enabled 和:disabled）。例如，我们可以使用下列内容：

input:enabled {
background-color: #dfd; }

input:disabled {
background-color: #fdd; }

这将更有利于给予用户反馈，让他们知道可以可以填写、什么不能填写，你会经常看到这样的依赖 JavaScript 的动态特征。

iPhone 表单案例

为了实践说明 :disabled，我已经禁用表单的“提交”按钮，并加入这行 CSS：

:disabled {
color: #600; }

按钮文字变红了！

:checked

第三个伪类是 :checked，用于处理元素的状态，如复选框或单选按钮。这对用户来说能给予非常有益的反馈，告诉他们选中了哪些。例如：

input[type=radio]:checked {
font-weight: bold; }

iPhone 表单案例

当按钮按下时，我们可以用 CSS 来突出显示每个按钮旁边的文本：

input:checked + label {
text-shadow: 0 0 6px #fff; }

我们首先选择任意已选中的 input 元素，然后查找包含目标文本的临近元素，并使用简单的 text-shadow 属性来装饰。

4. 否定伪类

:not

这是我最喜欢的另一种选择器，因为它会选中除了指定元素之外的全部元素。例如：

:not(footer) { … }

这将选中页面上除了 footer 标签之外的任何元素，在网页上是不是一个页脚元素的一切。用于表单输入框时，可以实现单个输入框的突出显示。

input:not([type=submit]) { … }
input:not(disabled) { … }

第一行选择除了 type 类型为 submit 的所有 input 元素。第二个选择所有不是 disabled 状态的 input 元素。

iPhone 表单案例

你已经切切实实看了 :not 选择器的作用。当与其他 CSS3 伪类混用时，他将变得更加强大。让我们来仔细看个例子：

fieldset input:not([type=radio]) {
margin: 0;
width: 290px;
font-size: 18px;
border-radius: 0;
border-bottom: 0;
border-color: #999;
padding: 8px 10px;}

在这里，我们选择字段元素内不是单选按钮的 input 输入框。这在表单中是很常见的，因为文本输入框、下拉选择框、单选按钮、提交按钮往往是风格不一的。点此查看最终的表单效果

旧瓶装新酒

让我们回到文章开头的 a:link。 HTML5 为元素带来了令人兴奋的变化，赋予 CSS3 伪类更多的功能。

元素现在可以嵌套块级元素，使整块的页面区块成为链接（只要这些部分不包含其他交互元素）。之前需要通过 JavaScript 来实现的，现在可以使用嵌套方案轻松实现了。例如：

CSS 伪类的含义是，你可以随意为一个

设定样式，无论它是被悬停（a:hover）活着被激活（a:active），像这样：

a:hover #advert {
background-color: #f7f7f7; }

减少对 JavaScript 代码的以来，并能适当增强代码语义总归是件好事。

跨浏览器兼容性

你肯定会问，IE8（或更早）不支持任何形式的 CSS3 选择器，即使最新的 Chrome、Opera、Safari 和 Firefox 都支持良好。在你的血液沸腾前，请考虑以下解决方案。

Internet Explorer 9

你可能对微软这款最新的 IE9 浏览器并不非常知情。但事实上它相当不错。虽然我并不指望读者和我想法一致，值得记住的是，IE 是世界上最为广泛流行的浏览器，和 Windows Update 和微软全球性的营销活动下，希望在不久的将来可以看到 IE9 成为主流。这对于网页设计者是好事，对伪类选择器也是好事。但是 IE8 和他的祖先们怎么办？

Internet Explorer 9 来了

让我们的老朋友 JavaScript 来救援 CSS3 伪类吧。我特别喜欢 Keith Clark 的 Selectivizr。Keith 组建了一个适用于各种 JavaScript 类库的脚本，为早期版本的 IE 浏览器增加了 CSS3 伪类选择器功能。但是要注意，各种类库支持并不完全一致：如果你在 Mootools 上使用 Selectivizr，那么所有的伪类将可用，但如果你使用 jQuery，只有部分伪类可以正常工作。

Selectivizr

Keith recently 发布了一个 jQuery 插件来支持以下 CSS3 伪类：

:first-of-type
:last-of-type
:only-of-type
:nth-of-type
:nth-last-of-type

另外，也值得关注下 Dean Edwards 写的 ie7.js 脚本。这份脚本解决了一些 IE 相关问题，包括 CSS3 伪类。

因此，我们可以开始使用 CSS3 伪类了吗？

我想就这个问题的答案取决于你如何看待 JavaScript 这玩意儿。现实是伪类完全可以被 class 和 id 替代。另一个现实是，在设置复杂布局样式时，伪类非常有用并且理所而然、自然而然。如果你发现伪类提高了你的 CSS 可读性，并减少了 HTML 中的非语义 CSS 类，这也正式我建议拥抱 CSS3 伪类的原因。

你可以使用两个选择器和一个 class 名，但只是重复工作。这也意味着使用伪类并不是必须。如果你没有坚持原则，代码可能看起来像这样：

li:nth-of-type(3),
li.third { … }

这种方法并不像使用伪类灵活，因为在内容变化时你需要同事改变 HTML 结构和 CSS 内容。

如果用户没有启用 JavaScript 会导致你陷入困境。许多网页设计师认为，功能（即 JavaScript）是和布局（即 CSS）不同的，所以你不应该依赖于 JavaScript 使 IE8 和早期浏览器支持伪类。

虽然我原则上统一，实际上我认为，相对于 99% 的用户提供最佳的经验和为剩余的 1％用户做出让步，显然前者更好（假如你有大量无脚本的用户，那就另当别论）。

按照你的网站分析，并准备成为一个网页设计师不断提高自己的技能。更重要的是，尽力为广大用户提供最好的体验。

最后的思考

IE8 对伪类支持的缺乏，很难不让人感到沮丧。可以说，浏览器以 JavaScript 方式计算和重新计算页面样式将对渲染速度造成影响，但因为所有其他主要浏览器现在支持这些选择器。令人沮丧的是，如果没有 JavaScript Hack 方案，我们的大多数用户无法从中受益。

但就像 Farnsworth 说的，Internet Explorer 9 的曙光将是一道分水岭，微软已确保其新的浏览器支持每个本文所讨论的选择器。

CSS3 伪类选择器不会大块占用你的样式表。他们是特有而充满活力的。而且更可能的是，至少在最初阶段，要补充性地优化，而不是实现一个整体的网页。也许你想丢弃列表最后一项的下边框，或向用户提供视觉反馈，因为他们在填写表格。CSS3 让这些都成为可能，并且会逐渐成为主流，我希望这将成为 Web 设计工具箱的一部分。

其他资源

你可能会对以下文章和相关资源感兴趣：

官方 CSS3 选择器推荐方案
所有你需要直到的东西
Wikipedia 的 CSS 指南
一份良好的背景阅读，书目是很好的资源。
nth-child 如何工作
Chris Coyier 的综合指南
Internet Explorer 9
如果你还未玩过微软的这款最新产品，肯定会大吃一惊！

英文原稿：How To Use CSS3 Pseudo-Classes | Smashing Magazine
翻译整理：如何使用 CSS3 伪类 | 芒果小站

使用
标签创建水平分隔线

芒果 — Thu, 10 Feb 2011 12:39:22 +0000

语义化 Web 是一件让人蛋疼的事，面对各种浏览器折腾的情况，想要挨个爆菊，总是会用没神马意义的 div 和 span 嵌套一层又一层。

比如制作一条水平分割线，如果你不觉得别扭，你可能会使用以下方法：

如果该容器用于包裹其他文档内容，加一条边框也未尝不可。但如果没有内容，简直多此一举。

HTML 给了我们另一种选择，

标签：


 标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

这时候你可能会说，

标签默认样式长得真难看，好吧，来点 CSS 调整下（注意重设默认样式）：

hr{
	border:none;
	margin:0;
	height:0;
	border-bottom:1px solid #000;
}

这样你爽了吧？另外，

支持 align/noshade/size/width 四个属性，不建议使用，请用样式设定。

快速转换 CSS 字体 Unicode 编码

芒果 — Sun, 26 Dec 2010 15:04:22 +0000

看了这篇 CSS 中文字体 Unicode 编码方案后，某位童鞋说一用到中文字体就要去找对照表，麻烦死，那这样吧：

escape('宋体');

这样生成的宋体编码为：

'%u5b8b%u4f53'

你可以手工将 %u 替换为斜杠 ‘\’。或者也可以这么搞：

escape('宋体').replace(/%u/g, '\\');

那就直接返回需要的编码格式鸟~

神奇的 CSS 元素透明法

芒果 — Thu, 25 Nov 2010 16:12:05 +0000

1、HTML 元素透明

其实本身，CSS 实现元素透明是件容易事儿。直接上代码：

opacity:.5

opacity 指的是不透明度，取值为 0~1 之间，1 表示完全不透明，0 表示完全透明。

A 级浏览器基本都支持 opacity 属性，但碰上 IE，总没好事。不过 IE 有滤镜，可以帮助我们拐弯抹角地搞定不透明度：

filter:alpha(opacity=50);

注：事实上会碰到透明背景层，而 opacity 属性是会继承的，避免这个问题，需要结合定位来实现。

在 CSS3 中，还可以使用 HSLA（色调、饱和、亮度、透明度）或者 RGBA（红、绿、蓝、透明度）来实现元素透明。例如：

background: hsla(0,100%,50%,0.5);
background: rgba(0,0,0,0.5);

2、背景图片透明

有一个值得关注的问题是，PNG8 格式的图片在 IE6 下仅支持全透明，也就是说，IE6 下使用 PNG8 无法实现背景的半透明效果。透不透明其实有时候无所谓，但问题是全透明状态下，会导致图片出现恶心的毛边。虽然可以在导出 PNG8 时，通过选择杂边颜色或者去除杂边的方式解决，但并不完美。

可喜的是，PNG24 支持全透明，所以 PNG24 就很威猛了，在图片透明的方案中，它绝对是武力指数最高的。

但碰上 IE，另一个恶心的问题又出现了，IE6 不支持支持半透明的 PNG24 透明图片（可能有点拗口）。

咋办？滤镜！

直接上代码：

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

但碰上 IE6，又悲剧了。在 CSS 文档和页面地址不一致时（比如很多网站会将静态资源放置于和站点本身不同域的 CDN 服务器上），会导致滤镜引用的图片不可获取。所以一旦资源跨域，必须保证图片地址为绝对路径。

IE 表单控件的按钮聚焦问题

芒果 — Sun, 24 Oct 2010 12:55:03 +0000

按钮的写法有两种，一种是或者，如果按钮用于表单提交，还必须加上 type 属性（type=”submit”）。为了美化按钮效果，一般会设置背景和边框属性。

但在 IE 下，表单区域获得焦点的情况下，如果按钮的 type 属性被设置为 submit，该按钮会自动触发聚焦效果。如下图所示：

想要避免出现这个恶心的黑框，需要将 button 的 border 属性设置为 none，然后外面套一层容器，用来模拟按钮的边框效果。

看看这篇文章的评论框，抛弃了原先过于小的按钮样式。用户体验在于细节哈~

多层元素嵌套的圆角按钮

芒果 — Tue, 14 Sep 2010 13:48:03 +0000

圆角按钮的实现看似并不困难，但会遇到如按钮宽度自适应文字长度等情况，不可能每次都切固定大小的背景图片。

自适应宽度的按钮，通常会采用类似下面的切图方法：

这样一来，只需要嵌套两层标签即可：

按钮

a 标签设定右侧块的圆角背景，span 标签设定左侧块的圆角背景以及内容区块，目前支付宝是这样做的。但前提需要保证按钮文案长度不会超过背景图片的宽度。

另一种切图的方案是分三块切，左侧一块，右侧一块，中间内容区域一块。

这样切图，事实上 a 标签也只需要嵌套两层即可实现自适应的圆角按钮。

按钮

a 标签设定右侧块的圆角背景，第一层 span 标签设定左侧块的圆角背景，第二层标签设定内容区域的水平平铺背景。但这种两层的方式在 button 标签上并不适用，需要通过一些乱七八糟的 hack 来干掉 button 标签各种表现上的缺陷。考虑到 a 标签按钮和 button 标签按钮的通用性，小小牺牲一下，套了三层标签。

具体请查看演示：round_corner_button.html

CSS 中文字体 Unicode 编码方案

芒果 — Fri, 03 Sep 2010 13:42:08 +0000

在 CSS 中使用中文字体通常直接设置字体名称，比如设置字体为宋体：font-family:’宋体’；但因此产生的一个问题是，如果 CSS 编码有误，会导致页面加载后 CSS 中的中文字体乱码，请看下图所示：

通常会采用对中文字体进行 Unicode 编码的方式来解决这个危险的问题。比如字符“宋体”经过 Unicode 编码后为 “\5b8b\4f53″。以淘宝为例：font:12px/1.5 tahoma,arial,\5b8b\4f53; 预选的中文字体是编码后的宋体。

有一种快速获得字体 Unicode 编码的方法，如果你使用火狐的 Firebug 插件，直接在控制台中输入 escape(‘黑体’)，就可以得到黑体的 Unicode 编码，但需要经过处理才可以使用到 CSS 文件中来，请看下图所示：

于此获得到了 “%u9ED1%u4F53″，将其改写为 “\9ED1\4F53″ 即可写入 CSS 文件。

这样或许还是有些小麻烦，那也没关系，芒果这里有一份比较完整的表格，自己查吧。

中文名	Unicode
新细明体	\65B0\7EC6\660E\4F53
细明体	\7EC6\660E\4F53
标楷体	\6807\6977\4F53
黑体	\9ED1\4F53
宋体	\5B8B\4F53
新宋体	\65B0\5B8B\4F53
仿宋	\4EFF\5B8B
楷体	\6977\4F53
仿宋_GB2312	\4EFF\5B8B_GB2312
楷体_GB2312	\6977\4F53_GB2312
微软正黑体	\5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

CSS 边框重叠鼠标悬停效果

芒果 — Thu, 26 Aug 2010 15:11:33 +0000

前几天某个同事的项目中碰到一个边框重叠鼠标悬停效果，要实现鼠标移上后按钮边框换色，但左右两个按钮的边框又是合并在一起的。就像下面这张图片示意：

如果看不明白，请移步参考淘宝搜索结果页面中的“信用”、“价格”两个排序按钮。http://s.taobao.com/search?q=%CC%D4%B1%A6

以三个横排并列的按钮为例：


    A
    B
    C

这个问题的关键在于合并相邻两个容器的边框，视觉上就像表格边框的合并那样，芒果选择使用负 margin 来隐藏右侧边框。鼠标 hover 时如何才能使当前按钮边框呈现出来？其实也很简单，只要给 a:hover 伪类加上 position:relative;z-index:1; 即可。另外，为了修复 IE6 下的定位问题，建议给每一个 a 元素添加 position:relative; 属性。样式代码如下：

.grid{display:inline-block;}
.grid a{float:left;border:5px solid #cdcdcd;margin-right:-5px;position:relative;width:50px;height:50px;line-height:50px;text-align:center;}
.grid a:hover{border:5px solid #31b1fc;position:relative;z-index:1;}

最终效果如下。因为子节点浮动，外层最好能清除浮动，清浮动的方法请猛击此处查看：http://www.mangguo.org/mangguo-teach-you-clear-float

另外，芒果还想到一种形如九宫格的 CSS 实现，代码也很简洁。

详情参考这份 DEMO 稿：border_collapse_hover.html

CSS3 Media Queries，媒介设备查询

芒果 — Wed, 18 Aug 2010 16:13:35 +0000

CSS2 允许通过 media 属性为不同媒介设备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media queries 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备，并采用不同的样式表。例如，你可以有一个大屏幕显示器的专用样式和一个移动设备的专用样式。这将非常强大，因为它允许不同的设备使用不同的界面外观，但并不改变你的文档内容。阅读这篇文章来了解一下国外已经良好应用 media queries 的网站案例。

CSS3 Media Queries (演示稿)
点击这个演示稿并且缩放的你浏览器窗口尺寸，观察页面元素的动态变化。

最大宽度

如果可视区域宽度小于 600 像素，以下 CSS 将被应用。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

如果你想要引入独立的样式表，可以在标签对之间插入以下代码行。

最小宽度

如果可视区域宽度大于 900 像素，以下 CSS 将被应用。

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

多媒介查询

你可以组合多个媒介类型查询，如果可视区域宽度介于 600 像素至 900 像素，以下代码将被应用。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

设备宽度

如果设备最大宽度为 480 像素（如 iPhone），以下代码将被应用。注：最大设备宽度意味着设备的实际可视面积，最大宽度意味着可视区域面积。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

iPhone 4 专用

以下代码为 iPhone 4 专用。（案例：Thomas Maier）

iPad 专用

你也可以使用 media queries 来检测 iPad 上横向纵向坐标。（案例：Cloud Four）

Internet Explorer 的 Media Queries 解决方案
不幸的事，Internet Explorer 8 或更早的版本并不支持 media queries。你可以使用 JavaScript 来弥补这一缺陷。以下是几个解决方案：

1、CSS Tricks – using jQuery to detect browser size
2、The Man in Blue – using Javascript (这篇文章写于六年前)
3、jQuery Media Queries Plugin

案例站点

你必须在支持 media queries 的高级浏览器如 Firefox、Chrome、Safari 中浏览以下站点。看看随着窗口尺寸改变时，这些页面布局是如何响应的。

Hicksdesign

大尺寸： 三栏式侧边栏
小尺寸： 两栏式侧边栏（中间栏沉入左侧栏）
更小尺寸： 一栏式侧边栏（右侧栏移至 Logo 右方）
最小尺寸： 没有侧边栏（Logo 和右侧栏移至顶部，另一个侧边栏移至底部）

Colly

根据浏览器可视区域的尺寸，布局在一栏式、两栏式和四栏式之间切换。

A List Apart

大尺寸：导航在顶部，一排图片
中尺寸：导航在左侧，三列图片
小尺寸：导航在顶部，Logo 没有背景图片，三列图片

Tee Gallery

这个和上述 Colly 案例非常相似，但是不同之处在于 Tee Gallery 中的图片会随着窗口尺寸变化弹性地自适应。这里的技巧是使用百分比宽度，而不使用固定像素宽度。

总结

请记住：拥有优化过的移动版样式表并不意味着移动版网站的优化。真正的移动设备优化，图片和标记语言也必须被缩减到最小，Media queries 目的是为设计表现，而不是优化。

英文原稿：CSS3 Media Queries | WebDesignerWall
翻译整理：CSS3 Media Queries，媒介设备查询 | 芒果

Minify，合并压缩 JavaScript 和 CSS 文件

芒果 — Fri, 30 Jul 2010 10:22:30 +0000

对于网站应用而言，HTTP 请求是一件奢侈的事情，所以我们要尽量减少它。减少 HTTP 请求也正是网站性能优化的一个要素。通常通过手工合并会带来大量的维护问题。所以能交给机器做的就让机器来做吧。

之前有心的网友可能会发现，芒果的 CSS 并非一般的样式表引入方式，而是像下面这样：

这就是使用 Minify 方案后的结果。那究竟 Minify 是什么？

“Minify 可以按需对 JavaScript 以及 CSS 文件进行合并、压缩以及缓存，以加快页面的载入速度。而安装 Minify 则极其简单，只需在网站根目录下上传程序目录即可。”

我们不妨来简单分解一下芒果这个怪异的 CSS 文件，首先通过访问根目录下的 minify 目录 (/min/) ，以参数形式指定文件目录 (参数 b)，配置需要压缩合并的 CSS 单文件 (参数 f)，然后动态输出独立的伪 CSS 文件。以芒果为例：

整站共有 reset.css、mangguo.min.css 两个样式文件。放置于 WordPress 对应当前主题的 CSS 目录下，那么基准 URL 指定为：

b=wp-content/themes/mangguo/css

文件列表指定为：

f=reset.css,mangguo.min.css

参数之间通过 & 符号连接。也可以不指定基准 URL，而缺省 b 参数直接配置文件组合：

当然 JavaScript 文件的压缩合并原理和 CSS 是一致的。

项目托管地址：http://code.google.com/p/minify

CSS 左右两栏自适应布局

芒果 — Sun, 13 Jun 2010 17:18:03 +0000

昨天在项目中遇到的一个 CSS 左右两栏自适应布局问题，做了个简单的演示稿，以作备份。

场景一：文字围绕

芒果 – mangguo.org

芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org 芒果 – mangguo.org

这种情况比较普遍，无论左侧容器是否定宽，只需对左侧设置左浮动即可实现文字围绕效果：

float:left;

场景二：右侧往下撑开

芒果 – mangguo.org

如果右侧需要往下撑开，仅仅左侧浮动是不够的，右侧容器需要设置溢出自动：

overflow:auto;

但 IE6 下无效，当然首先想到的是触发 hasLayout，那就简单加个 zoom 属性吧：

zoom:1;

可以发现，左右容器均无预设宽度，这样做的好处是实现了两栏内容的自适应。好了，多说无益，就这样吧。

纯 CSS 实现文本渐变效果

芒果 — Sun, 23 May 2010 02:06:08 +0000

随着 CSS 的最新进展，我们现在能够获得强大的造型技术，包括容器阴影，圆角，背景渐变等等。但我们目前没有能力在文本上运用渐变效果。幸运的是，在这篇纯 CSS 实现文本渐变效果使用一些花招，我们可以迫使代码呈现这种效果 – 至少在 Webkit 引擎浏览器中如此！

芒果前天的文章 Google Font API，在网页上使用个性字体谈到了 Google Font API，今天顺道试试手。

最终代码：




	
	Text Gradients
	
	


       Hello World

这个方法来自 NiceWebType.com 网站，你可以访问它学习更多东西。

英文原稿：Quick Tip: Pure CSS Text Gradients | Nettuts+
翻译整理：纯 CSS 实现文本渐变效果 | 芒果

13+ 模拟 JavaScript 交互效果的纯 CSS 技术

芒果 — Sat, 22 May 2010 04:25:11 +0000

在用户界面这一块，使用 JavaScript 总能创造出丰富强大的交互效果。但只需一点想象力和创造力，仅仅通过 CSS 也可以实现相同类型的效果。以下是 13+ 模拟 JavaScript 交互效果的纯 CSS 技术，使我们不再用单一的方式实现需要的交互。你会发现，这些技术有些是非常有用的，而有些则证明能用纯 CSS 更为简单地实现。

如何使用纯 CSS 创建宝丽来相册

使用 CSS3 创建 coda 效果的气泡

使用 CSS 创建折叠菜单

如何使用 CSS3 创建图像画廊

纯 CSS3 悬停选项卡

使用 CSS 创建类 JQuery 幻灯切换

如何用 CSS 创建 Lightbox 弹出对话框

英文原稿：13 Pure CSS Techniques for Creating JavaScript-like Interactions | Web Design Ledger
翻译整理：13+ 模拟 JavaScript 交互效果的纯 CSS 技术 | 芒果

芒果小站 » CSS

抛弃 CSS Hacks 后的浏览器兼容方案

推荐阅读

纯英文纯数字 CSS 强制折行

推荐阅读

让 Chrome 崩溃的 CSS 代码

推荐阅读

自定义文件上传控件样式（兼容 IE6）

推荐阅读

CSS 忍者：安全的 CSS hacks 秘籍

通过条件判断引入样式表

CSS hacks

通过条件判断插入指定类

推荐阅读

12 款简化 CSS3 开发的实用工具

CSS3 Pie

CSS3 Builder

CSS3 Drop shadow generator

Cascader

Border Radius.com

Button Maker

CSS3 Generator

Modernizr

HTML5 & CSS3 Support

CSS3 Gradient Generator

CSS3 Please

CSS3 Cheat Sheet

推荐阅读

IE6 下的神奇 CSS 字体 bug

推荐阅读

如何使用 CSS3 伪类

伪类简史

CSS2 来了

为何使用伪类？

示例代码

Awesome Widgets

All the cool kids have got one

1. 结构伪类

E:root

E:nth-child(n)

E:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

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

:only-of-type

:last-child

:only-child

:empty

2. 目标伪类

:target

3. UI 元素状态伪类

:enabled 和 :disabled

:checked

4. 否定伪类

:not

旧瓶装新酒

跨浏览器兼容性

Internet Explorer 9

因此，我们可以开始使用 CSS3 伪类了吗？

最后的思考

其他资源

推荐阅读

使用 标签创建水平分隔线

推荐阅读

快速转换 CSS 字体 Unicode 编码

推荐阅读

神奇的 CSS 元素透明法

推荐阅读

IE 表单控件的按钮聚焦问题

推荐阅读

多层元素嵌套的圆角按钮

推荐阅读

CSS 中文字体 Unicode 编码方案

推荐阅读

CSS 边框重叠鼠标悬停效果

推荐阅读

CSS3 Media Queries，媒介设备查询

推荐阅读

Minify，合并压缩 JavaScript 和 CSS 文件

推荐阅读

使用
标签创建水平分隔线