如何使用CSS3伪类

编写CSS3是一件美妙的事情,但它很容易被bamboozled变换和动画(其中许多是特定供应商)和忘记的选择,也增加了规范的螺母和螺栓。一个强大的新伪选择的号码(16中列出的最新的W3C规范)让我们选择了一系列新的标准的基础上的元素。

001

之前,我们看一下这些新的CSS3伪类,让我们简要地钻研到尘封过去的Web图表的这些选择往往被误解的旅程。

 

一个伪类的简史

CSS1的规格早在1996年完成,一些伪选择,其中包括许多您可能使用几乎每天都有。例如:

  • :link
  • :visited
  • :hover
  • :active

这些国家的每个人都可以被应用到元素,通常<A>,后伪类的名称。令人惊异的是,认为这些伪类赶到现场前HTML4的是由W3C发布一年后,于1997年12月。

 

CSS2的抵

在CSS1中的高跟鞋热CSS2的是,仅仅两年后,于1998年5月出版的推荐规范。随着令人兴奋的事情,如定位为新的伪类:第一儿童和郎() 。

有很多的方式来表示文档的语言,如果你使用HTML5,它很可能是由<html lang=”en”>后把文件类型(指定您当地的语言,当然)。现在您可以使用:郎(EN)页面上,这是非常有用的语言动态变化时的风格元素。

:第一个孩子,

你可能已经使用:首先孩子在您的文件。它经常被用来添加或删除列表中的第一个元素的顶部边界。然后,奇怪的是,它不伴有:最后孩子 ;我们不得不等待,直到CSS3的提出,才能够满足其兄弟。

 

为什么要使用伪类?

是什么让伪类非常有用,是他们让你风格的内容动态。在上面的<A>例如,我们能够描述如何链接样式,当用户与他们交互。正如我们将看到,新的伪类允许我们动态风格的内容在文件或国家的立场为基础。

十六新的伪-类已作为W3C的CSS的建议的建议的一部分,他们被打破分为四组下来:结构性伪类,伪类UI元素的状态,1目标伪-级和1否定伪一流的。

 

002

W3C的CSS的家。

 

我们现在通过的16项新的伪选择一次运行,看看如何使用每个。E是元素命名类W3C的使用,在那里,我将使用相同的符号, N 是一个数字,s是一个选择。

 

示例代码

对于许多这些新的选择,我也参考了一些示例代码,所以你可以看到什么效果的CSS。我们将采取定期的形式,并使其适合为使用我们新的CSS3伪类的iPhone。

请注意,可以说,我们可以使用这种形式的多ID和类选择,但它是一个伟大的机会,采取新的伪类,旋转,并演示了如何在现实世界的例子,他们可能会使用。下面是HTML(你可以看到我的网站在行动):

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

 

003

我们的形式,之前和之后。

 

1。结构性伪类

根据W3C,结构性伪类执行以下操作:

…允许选择的基础上的额外信息,在于在文档树中,但不能代表其他简单的选择或组合子。

这是什么意思是,我们已经涡轮增压选择,动态地选择基于其在文档中的位置的内容。因此,让我们在文件的开头开始,根。

 

004

W3C网站上的第3级的选择。

 

C:根

:根 伪类选择页面上的根元素。出一百九十九倍,这将是<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; }

 

电子邮件:N个孩子(N)

:n个孩子()选择可能需要有点实验充分了解。最简单的实现是使用关键字奇数或偶数,这是显示行或列包含数据时非常有用。例如,我们可以使用以下命令:

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

这将突出每一个无序列表中的其他行。使用表格时,你会发现这个技术非常方便。例如:

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

:第n个孩子的选择,可以更具体的和灵活的,虽然。你可以从列表中选择第三个元素,像这样:

li:nth-child(3) { … }

注意氮不从零开始,因为它可能在一个数组。第一个元素是:n个孩子(1) ,第二个是:n个孩子(2)等。

使事情更令人兴奋的,我们也可以使用一些简单的代数。考虑以下几点:

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

每当我们使用n在这种方式,它代表所有的正整数(直到运行的文件元素的选择!)。在这种情况下,它会选择以下列表中的项目:

  • Nothing (2 × 0)
  • 2nd element (2 × 1)
  • 4th element (2 × 2)
  • 6th element (2 × 3)
  • 8th element (2 × 4)
  • etc.

等等

这实际上给了我们作为同一件事n个孩子(偶)。所以,让我们的混合了一下事情:

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

这给了我们:

  • Nothing (5 × 0)
  • 5th element (5 × 1)
  • 10th element (5 × 2)
  • 15th element (5 × 3)
  • 20th element (5 × 4)
  • etc.

等等

也许这将是有益的长列表或表格,也许不是。我们还可以添加和减去这个公式中的数字:

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

这给了我们:

  • 1st element ((4 × 0) + 1)
  • 5th element ((4 × 1) + 1)
  • 9th element ((4 × 2) + 1)
  • 13th element ((4 × 3) + 1)
  • 17th element ((4 × 4) + 1)
  • etc.

等等

SitePoint指出一个有趣的怪癖这里。如果设置n个为阴性,你就可以选择像这样的项目的第x号:

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

比方说,你要选择列表中的前五个项目。这里的CSS:

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

这给了我们:

  • 5th element (-0 + 5)
  • 4th element (-1 + 5)
  • 3rd element (-2 + 5)
  • 2nd element (-3 + 5)
  • 1st element (-4 + 5)
  • Nothing (-5 + 5)
  • Nothing (-6 + 5)
  • etc.

等等

如果你为了普及中列出的数据,然后强调说,前10项可能是有用的。

建站与这些创造了斑马条纹的演示,这是很好的例子了,你会如何使用n个孩子在实践中。

 

005

斑马条纹用CSS3表。

 

如果没有你的表需要的造型,那么你可以做什么Webvisionary奖和使用其网站的风格交替部分:第n个孩子。这里的CSS:

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

影响是微妙的网站上,但它增加了一个详细的层,将错过在旧的浏览器。

 

006

:n个孩子选择行动Webvisionary奖。

我们可以使用iPhone的表单示例:第n个孩子在我们的iPhone形式的例子,在少数地方,但让我们把注意力集中在一个。我们要隐藏从视图中的前三个字段集的标签和使用占位符文本,而不是。这里的CSS:

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

在这里,我们寻找的前三儿童的<form>元素(这是我们的代码中的所有字段集),然后选择标签。然后,我们隐藏这些标签显示:无;

 

电子邮件:最后N个孩子(N)

不能混淆了我们所有的内容:第n个孩子()伪类,在W3C的聪明的人也给了我们:第n-最后的孩子(N) 。它的运作很像:n个孩子()除了反向,在选择的最后一个项目计数。

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结构伪类选择器测试仪,这绝对是值得一试。

 

007

CSS3的结构伪类选择器测试仪。

 

iPhone表格为例,

我们可以用我们的例子中第n-过去的孩子要添加为圆角我们输入下面是我们的CSS,过于具体,但提供了一个想法如何,我们可以链伪-选择“卡数。”一起:

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

首先,我们抓住了倒数第二的fieldset和选择是从去年第三(在这种情况下,我们的“身份证号码”输入)输入。然后,我们添加一个边界半径。

:第N-型(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; }

与第n个孩子()和第n-最后的孩子() ,你可以用代数表达式:

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

这是值得记住,如果你需要得到有关这一特定的目标元素,然后使用描述性的类名,而不是可能更为有用。

西蒙福斯特已创建了一个关于他45 RPM的记录集美丽infographic,他使用:第n-型风格的一些数据。这里有一个从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);
}

这里是它看起来像在自己的网站:

 

008

:第n-型的选择上“作记录。”

 

iPhone的表单示例

让我们说,我们希望每秒的输入元素,有圆形的底部角落。我们可以用CSS实现:

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

在我们的例子中,我们要申请这只是支付的fieldset,因为个人详细资料的fieldset有三个文本输入。我们也将获得一个有点棘手,确保我们不选择任何无线电投入。下面是最终的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; }

我们将解释:在本文稍后。

 

:第N-型的最后(N)

希望现在你看看这是怎么回事:最后第n-型()开始在选定的元素向后工程。

要选择在文章的最后一段,你会使用这个:

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

你可能想选择这个选择,而不是:最后的孩子,如果你的文章并不总是与段结束。

 

:第一类型和最后的类型

如:第n-型()和最后的第n-型()太具体,你的目的,那么你可以使用几个简单的选择。例如,而不是这…

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

我们可以只使用这个:

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

正如你所期望的,在完全相同的方式,而是从最后一个元素:最后的类型入选作品。

 

iPhone的表单示例

,我们可以使用两种:第一型:最后的类型,在我们的iPhone的例子,尤其是当的圆角造型。这里的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的第一线,增加了顶部的圆形边界的所有第一型输入一个字段,单选按钮。第二行中的最后一个字段输入元素增加了圆润的底部边框。

 

:只对型

还有一类型的选择看:仅式() 。这是选择只有一个,他们在他们的父元素的元素是有益的。

例如,考虑这个CSS选择器之间的差异……

p {
font-size: 18px; }

……这一个:

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

第一选择器将页面上的每一个段落元素的风格。第二个元素将抓住一个段落,这是只有在其父段。

当你造型的内容或数据已动态输出从数据库中查询只返回一个结果,这可能是得心应手。

devsnippet创造了单个图像是不同的样式,从多个图像在其中的演示。

 

009

devsnippet的演示:只型。

 

iPhone的表单示例,

在我们的iPhone的例子,我们可以确保一个字段唯一的孩子,所有的投入都圆润的顶部和底部的角落。CSS的将是:

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

:最后的孩子

:第一,孩子的CSS2规范的一部分,但没有出现,直到CSS3的犯罪,其合作伙伴:最后的孩子,这是有点怪。这里没有表达或关键字;它只是选择它的父元素的最后一个孩子。例如:

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

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

这是一个有用的方式,从名单中删除的底部边界。你会看到这种技术往往在WordPress部件。

雷切尔安德鲁看起来在最后的孩子 “和其他CSS选择在她的24个途径文章伪CSS3选择器的清洁守则。“雷切尔向我们展示了如何使用这个选择,无需额外的类创建一个格式化的图片库。

 

010

为CSS:行动中的最后一个孩子,雷切尔安德鲁礼貌。

 

:独生子女

如果一个元素是其母公司的唯一的孩子,那么你可以选择它:独生子女。不像只型,它不是不管它是什么类型的元素。例如:

li:only-child { … }

我们可以利用这个选择列表中的元素,是他们唯一的列表元素<OL>或<UL>父。

:空

最后,在结构性伪类,我们有:空。这并不奇怪,这唯一的选择有没有孩子,没有内容的元素。再次,这可能是有用的处理从数据库中输出动态内容时。

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

您可以使用上述空搜索结果吸引用户的关注。

 

2。目标伪类

 

:目标

这是我最喜欢的伪类之一,因为它使我们能够基于URL的页面的样式元素。如果URL有一个标识符(如下#),然后:目标伪类风格的元素的ID标识符股。以一个URL看起来像这样:

http://www.example.com/css3-pseudo-selectors#摘要

总结与ID部分,现在可以像这样称呼:

:target {
background-color: #fcc; }

这是一个伟大的方式已经从外部内容的链接的网页上的样式元素。你也可以使用内部锚突出内容,用户跳过。

也许最令人印象深刻的我见过的使用:目标是克里姆万的绿色滚动的网站。克里使用一些有创意的CSS3和目标伪类来创建动画标签导航。演示包含了一些对CSS3的巧妙运用,说明如何伪类通常最好在与其他CSS选择器组合使用。

 

011

Corey的绿色滚动网站。

 

以上,另外还有一个有趣的例子,网页设计笔记本。在,目标和Webkit动画用来突出目标p的文本块。克里斯Coyier还创建了一个基于目标制表符系统 的CSS技巧。

 

iPhone的表单示例,

你会看到我的演示页上,我加入了跳过下降到形式的不同部分在顶部导航栏。我们可以突出显示任何部分用户跳转到以下CSS:

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

-webkit-border-radius:
10px;}

 

3。UI元素状态伪类

 

:启用和禁用

连同:选中:启用和禁用弥补三个UI元素状态伪类。也就是说,它们允许你根据其状态的样式元素(通常是表单元素)。一个国家可以由用户(与选中),或由开发商(与启用:禁用)。例如,我们可以使用以下命令:

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

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

这是一个伟大的方式,让用户可以反馈,可以不填。你会经常看到这个充满活力的增强功能与JavaScript。

禁用iPhone的表单示例 为了说明:在实践中,我已禁止在HTML表单的“提交”按钮,添加这行的CSS:

:disabled {
color: #600; }

按钮上的文字是红色的!

 

:检查

第三个伪类是:检查,涉及的元素,如一个复选框或单选按钮的状态。再次,这是给哪些用户已选择的反馈非常有用。例如:

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

 

iPhone的表单示例

作为一个蓬勃发展,我们可以使用CSS来突出显示文本每个单选按钮旁边的按钮被按下一次:

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

我们首先选择任何已被选中的输入,然后我们寻找第二天<span>元素包含我们的文字的。突出一个简单的文本文字阴影是一种有效的方式提供用户反馈。

 

4。否定伪类

 

:没有

这是我的最爱,因为它选择一切,除了你指定的元素。例如:

:not(footer) { … }

这选择一切,这不是一个页脚元素的页面上。与形式投入使用时,他们让我们得到一点sneakier的:

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

第一行选择每一种输入,这不是一个“提交”按钮,这是有用的造型形式。第二个选择未启用的所有输入元素;再次给有关如何填写表格的反馈有用。

 

iPhone用户为例,

您已经看到了:没有行动的选择。这是特别强大时与其他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;}

在这里,我们选择里面的fieldset元素是所有输入单选按钮。造型形式,因为你会经常想选择框,单选按钮和“提交”按钮不同风格的文本输入时,这是非常有用的。

退房的最后一页。

 

旧的是新

让我们回到我们的故事开始和谦虚的答:链接。HTML5的最近赶到现场,并带来了一个令人兴奋的变化,到了CSS3伪选择加性效应的 <a> 元素。

现在<a> 元素可以被缠块级元素,整个路段变成您的网页链接(只要这些部分不包含其他互动元素)。而JavaScript是一次使整个流行<p>元素的点击,你现在可以做包装在第这么<A>的标签,像这样:

<a href="http://www.smashing-magazine.com">
<p id="advert">
<hgroup>
<h1>Jackson’s Widgets</h1>
<h2>The finest widgets in Kentucky</h2>
</hgroup>
<p>Buy Jackson’s Widgets today,
and be sure of a trouble-free life for you,
your widget and your machinery.
Trusted and sold since 1896.</p>
</p>
</a>

对CSS伪选择的含义是,你可以现在风格一个 <p> :悬停的基础上是否正在上空盘旋()或主动(A:活跃),像这样:

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

减少JavaScript和增加语义的代码有什么好!

 

跨浏览器兼容性

你必须要问,你没有!令人难以置信的是,Internet Explorer 8中(或更早)不支持任何这些选择,而最新版本的浏览器,歌剧,Safari和Firefox都这样做。之前,你的血沸腾,可以考虑以下解决方案。

 

INTERNET EXPLORER 9的

除非你一直在上周的岩石下生活,你听说过,微软发布了其最新的浏览器,在不知情的市民。好事是,它实际上是相当不错的。虽然我不期待的人正在阅读这篇文章,以改变他们的浏览习惯,这是值得记住,世界上大多数使用IE浏览器,以及Windows Update和一个全球性的营销活动,我们希望看到作为主导IE9在不久的将来,Windows浏览器。这是网页设计师,它是伪选择。但是,关于IE8和它的祖先呢?

 

012

Internet Explorer 9的是在这里。

 

JAVASCRIPT的

我们的老朋友的JavaScript来救援。我特别喜欢Selectivizr基思·克拉克。基思已经把一个可爱的脚本,在选择与您的JavaScript库的结合,增加了对CSS3伪类早期版本的IE浏览器的选择功能。被警告,一些图书馆票价比别人更好:如果你使用与Selectivizr MooTools的,然后将所有的伪类可用,但如果你依靠jQuery的做繁重的任务,然后选择数荣获“T在所有的工作。

 

013

selectivizr。

 

基思最近发布了一个jQuery插件扩展jQuery的包括支持以下CSS3伪类选择:

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

由ie7.js脚本(及其继承人)Dean Edwards的无处不在的,它也值得。这个脚本解决了IE浏览器相关的问题,包括CSS3的伪选择。

 

所以,我们应该开始使用CSS3的伪选择今天?

我想这个问题的答案取决于你如何查看的JavaScript。这是真的,伪选择器类和ID可以完全取代,但它也是如此,当伪选择造型复杂的布局,都非常有用,自然你的CSS下一步。如果你发现,他们提高你的CSS的可读性,并减少需要在你的HTML(非语义)类,那么我肯定会推荐拥抱今天。

你可以使用两个选择,落在一个类名,但只是重复工作。这也意味着,你会不会需要摆在首位的伪类。但是如果你没有选择走这条路,代码可能看起来像这样:

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

这种方法是不,因为你必须不断更新的HTML和CSS网页内容的变化时,只要灵活地使用伪类。

如果很多用户没有启用JavaScript,让你在绑定位。许多Web设计者认为(即JavaScript)的功能是不同的布局(即CSS),所以你不应该依赖于JavaScript伪选择的工作在IE8和更早。

虽然我同意的原则,在实践中,我认为99%的用户提供尽可能最好的体验是优于占余下的1%(或不过大非JavaScript的基础可能)。

按照您的网站的分析,并准备作出决定,提高自己的技能作为一个网页设计师,更重要的是,提供最好的体验到广大用户。

 

最后的思考

很难不被IE8的支持伪类的,完全缺乏郁闷。可以说,在浏览器计算,并以这种方式重新计算页面样式将影响渲染速??度,但因为所有其他的主流浏览器现在支持这些选择,这是令人沮丧的,我们的大多数用户无法从中受益,没有一个JavaScript黑客。

但作为法恩斯沃斯教授说,“大家好消息!”在地平线上的突破,是黎明的Internet Explorer 9,Microsoft已确定其新的浏览器支持的每一位在这篇文章中讨论的选择。

CSS3伪选择器可能不会占用大块的样式表。他们是具体 ??而充满活力的和更容易,至少在最初阶段,收尾添加到一个页面,而不是设置一个整体风格。也许你欲滴的底部边框,在列表的最后一个项目或提供视觉反馈给用户,因为他们填写表格,这是所有可能用CSS3,随着使用变得更加主流,我希望这些将成为一项经常性网页设计师的工具箱的一部分。

如果你看过这些选择在该领域的任何有趣或令人兴奋的用途在那里,让我们知道在下面的意见。

 

其他资源

你可能会在以下的文章和相关资源:

官方CSS3选择器建议建议

你需要知道的一切,从负责人。

维基指南层叠样式表

一个很好的背景阅读,书目是一个伟大的资源。

如何n个孩子的

工作从不断可靠克里斯Coyier的全面指南。

Internet Explorer 9的,

如果你还没有发挥与微软的最新产品,你一个惊喜。

 

原文:http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes