芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
10

如何使用 CSS3 伪类

作者 芒果/分类 代码/发布于 2011-04-29 00:09

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 规范的对这两个兄弟伪类的支持。

为何使用伪类?

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

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

W3C 是 CSS 之家

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

示例代码

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

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

<form>
	<hgroup>
		<h1>Awesome Widgets</h1>
		<h2>All the cool kids have got one</h2>
	</hgroup>
	<fieldset id="email">
		<legend>Where do we send your receipt?</legend>
		<label for="email">Email Address</label>
		<input type="email" name="email" placeholder="Email Address" />
	</fieldset>
	<fieldset id="details">
		<legend>Personal Details</legend>
		<select name="title" id="field_title">
			<option value="" selected="selected">Title</option>
			<option value="Mr">Mr</option>
			<option value="Mrs">Mrs</option>
			<option value="Miss">Miss</option>
		</select>
		<label for="firstname">First Name</label>
		<input name="firstname" placeholder="First Name" />
		<label for="initial">Initial</label>
		<input name="initial" placeholder="Initial" size="3" />
		<label for="surname">Surname</label>
		<input name="surname" placeholder="Surname" />
	</fieldset>
	<fieldset id="payment">
		<legend>Payment Details</legend>
		<label for="cardname">Name on card</label>
		<input name="cardname" placeholder="Name on card" />
		<label for"cardnumber">Card number</label>
		<input name="cardnumber" placeholder="Card number" />
		<select name="cardType" id="field_cardType">
			<option value="" selected="selected">Select Card Type</option>
			<option value="1">Visa</option>
			<option value="2">American Express</option>
			<option value="3">MasterCard</option>
		</select>
		<label for="cardExpiryMonth">Expiry Date</label>
		<select id="field_cardExpiryMonth" name="cardExpiryMonth">
			<option selected="selected" value="mm">MM</option>
			<option value="01">01</option>
			<option value="02">02</option>
			<option value="03">03</option>
			<option value="04">04</option>
			<option value="05">05</option>
			<option value="06">06</option>
			<option value="07">07</option>
			<option value="08">08</option>
			<option value="09">09</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
		</select>
		/
		<select id="field_cardExpiryYear" name="cardExpiryYear">
			<option value="yyyy">YYYY</option>
			<option value="2011">11</option>
			<option value="2012">12</option>
			<option value="2013">13</option>
			<option value="2014">14</option>
			<option value="2015">15</option>
			<option value="2016">16</option>
			<option value="2017">17</option>
			<option value="2018">18</option>
			<option value="2019">19</option>
		</select>
		<label for"securitycode">Security code</label>
		<input name="securitycode" type="number" placeholder="Security code" size="3" />
		<p>Would you like Insurance?</p>
		<input type="radio" name="Insurance" id="insuranceYes" />
		<label for="insuranceYes">Yes Please!</label>
		<input type="radio" name="Insurance" id="insuranceNo" />
		<label for="insuranceNo">No thanks</label>
	</fieldset>
	<fieldset id="submit">
		<button type="submit" name="Submit" disabled>Here I come!</button>
	</fieldset>
</form>

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

1. 结构伪类

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

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

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

W3C 上的 Level 3 选择器

E:root

:root 伪类选择页面的根元素。十有八九根节点是 <html> 元素,例如:

:root { background-color: #fcfcfc; }

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

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

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; }

这里,我们寻找 <form> 元素的前三个子节点,然后选取 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 { … }

我们可以使用它来选择 <ul><ol> 中的单个列表项。

: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 元素,然后查找包含目标文本的临近 <span> 元素,并使用简单的 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 为 <a> 元素带来了令人兴奋的变化,赋予 CSS3 伪类更多的功能。

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

123

CSS 伪类的含义是,你可以随意为一个 <div> 设定样式,无论它是被悬停(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 设计工具箱的一部分。

其他资源

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

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

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/how-to-use-css3-pseudo-classes/" title="如何使用 CSS3 伪类" rel="bookmark">如何使用 CSS3 伪类 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 10 条群众意见

  1. 美女 /2011-04-29 09:43

    进来学习学习了 回应

    #1
  2. 熊胆粉 /2011-04-29 14:22

    您的设计能力实在是太强了 无法比拟 回应

    #2
  3. IM路人 /2011-04-29 15:38

    哇~好长啊~~难得难得 回应

    #3
  4. ?
    如何使用 CSS3 伪类 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-05-03 23:02

    […] 转载至:如何使用 CSS3 伪类 | 芒果小站 分类: css, 其它 标签: 临时 5 个简单实用的 CSS 属性纯 CSS 实现文本渐变效果CSS 的外联,内联和嵌入芒果教你清除浮动CSS 有序列表 ol 和无序列表 ul用 JavaScript 实现 HTML 代码运行框你真的认识 window.location 吗?使用 <hr> 标签创建水平分隔线用 CSS 实现段落首行缩进YUI 2: Event Utility 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #4
  5. ?
    IE6 下的神奇 CSS 字体 bug | 千里走单骑 /2011-05-21 12:16

    […] 如何使用 CSS3 伪类 (4) […] 回应

    #5
  6. ?
    如何使用 CSS3 伪类 | 千里走单骑 /2011-05-21 13:54

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

    #6
  7. 软件开发_网页特效_Web编程 /2011-06-08 14:27

    写得不错,只是有点长,看得有点晕~~~ 回应

    #7
  8. 夜飞羽 /2012-09-27 11:02

    这个非常全面的介绍了伪类选择器的各个方面,不错不错!!!
    特别是兼容性方面的介绍,在Jquery中真正用到时,问题才发现 回应

    #8
  9. ?
    CSS 伪类选择器:如何使用 CSS3 伪类 | 志文工作室 /2013-05-31 14:21

    […] 翻译整理:如何使用 CSS3 伪类 | 芒果小站 […] 回应

    #9
  10. ?
    CSS 伪类选择器:如何使用 CSS3 伪类 | LONDRY新知网 /2013-06-10 23:53

    […] 翻译整理:如何使用 CSS3 伪类 | 芒果小站 […] 回应

    #10

下面我简单说几句