如果你正在读这篇文章，那么我可以肯定你已经看到了最少听说过CSS3．最新版本的CSS包含了一些属性，允许您使用这些属性来设置HTML元素的样式圆角，落下阴影，甚至颜色渐变．然而，这些技术只是触及了CSS3所能做到的表面真的做的。

在本指南中，我将讨论三种先进的CSS3技术。

视图演示

这里是我将在本指南中使用的所有代码的一个演示页面。它最好在WebKit浏览器(如谷歌Chrome和Apple Safari)上查看，所以你可以看到CSS3webkit正在运行的动画属性。视图演示

1.先进的选择器

CSS3最重要但没有被大肆宣传的特性之一是新的高级选择器。我相信我不必告诉您为什么能够在不使用ID属性的情况下针对特定的HTML元素是一件好事!传统上，CSS选择器一直是:# id)、类(. class)、HTML元素(例如p)，以及伪类，例如:徘徊或:主动．

这个公式的问题是几乎每个元素都需要a钩．这意味着为了明确您所选择的内容，元素需要有一个ID(如果它只是一个元素)或一个类(如果它是一组元素)，以便浏览器知道您在谈论什么。当你开始处理非常复杂的布局时，需要添加到标记中的id和类的数量开始降低你(和你的网页)的速度。

输入CSS3。有了许多新的伪类可供选择，您的标记和页面响应时间我会感谢你的。为了演示其中一些新的选择器，我标记了一个简单的示例:两个无序列表。

<！DOCTYPE html>   
 
第一行
 
第一行
 
第一行
 
第一行
 
第一行
 
 
 
第一行
 
第一行
 
第一行
 
第一行
 
第一行
 
  

下面的代码块是一些基本的CSS，只是为了视觉效果。

我所做的只是使用通用选择器重置每个元素的边距和填充(＊)，并对这两个无序列表应用了一些基本样式。

* {margin: 0;填充:0;} ul {list-style-type: none;利润率:2%;边框:1px实心#ccc;填充:5 px;宽度:44%;浮:左;} ul li {margin-bottom: 5px;填充:2 px; }

现在是时候编写我们的第一个高级选择器了!(不要害怕!)选择器的第一部分说选择< ul >这就是第一个孩子另一种元素(the身体< >在这种情况下)。

然后它继续选择奇怪的在第一个无序列表中列出项目(第一、第三、第五，等等)。可以看到，结合使用伪类和HTML元素选择器，我们只选择了两者中的第一个相同的无序列表。

ul:第一个孩子李:nth-child(奇怪的)

另一种方法如下所示，它做同样的事情，除了这次选择第一个< ul >在页面上，不管它是否是另一个元素的第一个子元素。

ul: first-of-type李:nth-child(奇怪的)

当你进一步使用CSS选择器时，你会发现有很多方法来做同样的事情，这取决于你决定使用哪一种。选择第一个无序列表后，我们可以为奇数列表项设置样式(我们将为它们提供与其他列表项不同的背景颜色)。

Ul:first-child li:n -child(odd) {background-color: #d2fffe;边框:1px实心#000;｝

这不是唯一的使用方法: nth-child,虽然。

我们还可以使用它来根据各个元素的位置来设置它们的样式。下面的代码块给出了第五项的第一无序列表在我们的网页上有一个粉红色的背景。

Body > ul:first-child li:n -child(5) {background: #ffd2d2;｝

再举个例子，让我们向HTML文档中添加一个web表单。

请注意，其中一个输入元素(name =电子邮件的布尔属性禁用这样我就能演示:禁用伪类。

 
  name:  
  email:  
 
  message:  
 

下面的代码块只是我们的网页表单的一些基本样式。这将删除表单上的一些默认样式，并将标签移到左边，将输入移到右边。

表单{clear: both;宽度:95%;} form p {margin-bottom: 15px;明确:;溢出:隐藏;}表单标签{浮动:左;} form input, form textarea {width: 70%;浮:正确;边框:1px实心#000;}形成textarea{高度:50px; }

我们现在要利用禁用属性上的电子邮件输入添加一个深灰色的背景。

输入:禁用{背景:#e7e7e7;｝

接下来，我们有一个看起来很复杂的选择器，但实际上非常简单。通过使用:不伪类，我们选择段落内的所有内容，同时也选择表单内的所有内容除了为textarea > <而且<标识>元素。

本质上，这将做的是针对所有不是文本区域的表单字段。

Form p *:not(textarea):not(label) {height: 20px;｝

在实际操作中，使用它会更有效率输入作为选择器，但我选择用这种方式来演示:不选择器以及如何将不同的伪类链接在一起以产生更特定的选择器。以上就是高级选择器的内容。

我们已经讲了很多，但是我们还有两个技术要看!让我们从这些开始。

2.动画

网页动画一直是Flash和JavaScript的领域。现在，使用CSS3，只需几行代码就可以完成相同类型的动画!为了演示动画技术，让我们向标记中添加另一个部分:一个简单的div，没有类或ID，其中有一个<标题>-不要太花哨。

 
悬停查看动画
 

因为这是我们的第一个div，我们可以使用: first-of-type伪类来选择它。我将它设置为200px * 200px的蓝色方框，这样更容易看到。我还设置了样式h1视觉效果。

Div:first-of-type{宽度:200px;身高:200 px;背景:蓝色;颜色:# fff;明确:;} h1{颜色:#fff;字体:30px/1.5 Helvetica, Arial, sans-serif;宽度:150 px;Margin: 25px auto;｝

现在有趣的部分来了!要创建动画，请将以下三行添加到div: first-of-type选择器。您还没有看到任何东西，但这为动画功能奠定了基础，当盒子悬停在上面时，动画功能就会启动。

-webkit-transition-property: background, border;-webkit-transition-duration: 2s, 1s;-webkit-transition-timing-function:线性，易入-出;

我使用三个属性来定义盒子的两个动画(背景而且边境)．通过在每个选项的属性之间添加逗号，我可以区分哪些属性将应用于哪个动画。的-webkit-transition-propertyvalue定义哪些CSS属性将被动画(背景和边框)。

的-webkit-transition-duration属性定义动画过渡的时长——在本例中，背景为2秒，边界为1秒。最后一个-webkit-transition-timing-function告诉浏览器转换使用什么方程。所以我们已经为动画设置了舞台，但我们还没有添加任何动画!

我们通过声明我们的:徘徊属性。

Div:first-of-type:hover {background: #ccc;边框:20px纯蓝色;｝

现在，当你将鼠标悬停在我们的蓝色方框上时，背景和边界将发生变化并增长。就是这样。

我们不需要添加任何其他代码，动画将自动运行!我们还没有完成，让我们再向标记中添加一个动画示例。

 
点击我!< / h1 > < / div > < !——点击结束——>

我使用了一些内联Javascript，这样当点击div时，它就会360度旋转(在生产环境中，您会希望通过使用Javascript DOM选择方法来做到这一点——但这超出了本指南的范围)。

对于CSS，我们将使用:胎伪类(因为我们想要在我们的HTML的最后一个div)。

Div:最后一个子{宽度:95%;身高:100 px;-webkit-transition: webkit-transform 3s ease-in;背景:rgba(0, 0, 0, 0。5);光标:指针;｝

关于上面的CSS代码块需要注意的事情是background属性使用rgba属性赋予div一个半透明背景。另一件需要注意的事情是-webkit-transition属性简写以使div的旋转动画化。

这样，动画就完成了。接下来我们将介绍的最后一个CSS3技术:媒体查询。

3.媒体查询

我要讨论的第三种也是最后一种高级CSS3技术是媒体查询。它们是什么?媒体查询允许网页设计师根据用户浏览网页的方式添加有条件的CSS规则。

这样做的好处是，我们可以根据用户的情况制定关于如何显示网页的新规则。例如，如果它们的视口宽度小于800像素，我们就可以相应地调整布局，从而获得真正流畅而灵活的布局。那么我们该怎么做呢?

一件容易的事。

@media屏幕和(max-width:800px){…properties when browser is 800px or less... }

如果您在支持媒体查询的web浏览器中打开演示，您将看到当您减小浏览器的大小时，方框的大小会发生变化，这非常棒。

然而，如果浏览器宽度减小，两个列表停止浮动，这不是很棒吗?是的，它将是。CSS是这样的:

@media screen and (max-width:800px) {ul {float: none;max-width:汽车;宽度:汽车;}}

说到这里，让我们做一些其他的改变。

在下面的代码块中，如果视口小于800px，我们将使第一个div消失。

Div:first-of-type{显示:无;｝

现在当浏览器缩小到800px以上时，蓝框就会消失!我们甚至可以有多个@media一个文档中的规则。

如果浏览器的宽度降低到600px，我们做点别的怎么样?

@media screen and (max-width:600px) {ul:last-of-type {display: none;}}

现在，当你把浏览器缩小一点(小于600px)——就像魔术一样——第二个无序列表消失了!下面是宽度减小到400px时的一些样式。

@media screen and (max-width: 400px) {div:last-child, form {display: none;} ul:first-of-type{高度:自动;填充:50 px;} ul:first-of-type li {margin-bottom: 50px;}}

我希望你能看到媒体查询的潜力，特别是随着人们浏览网站的方式越来越多(比如通过移动设备)。

结束

现在你知道了三种高级CSS3技术!给自己一点鼓励，这是你应得的。需要注意的是，虽然选择器和媒体查询可以在大多数现代浏览器(Firefox, Safari, Chrome)中运行，但动画只能在基于webkit的浏览器(如Safari和Chrome)上运行。

进一步的阅读

• 选择器(W3C规范)
• CSS动画(WebKit的博客)
• 媒体查询(W3C规范)
• CSS媒体查询和使用可用空间
• 10个有趣的CSS3实验和演示
• 语义CSS3灯箱
• CSS3在野外的例子

相关内容

• 如何创建嵌入排版与CSS3
• CSS3在野外的例子