各种浏览器之间的激烈竞争意味着现在越来越多的人使用支持最新最先进的W3CWeb标准的设备来以更具交互性的方式访问互联网。这意味着我们最终可以利用CSS的强大功能和灵活性来创建更简洁、更好维护的浏览器前端代码。现在让我们来看看一些您可能不知道的令人兴奋的CSS特性。使用attr()在CSS中显示HTML属性值attr()函数早在CSS2.1标准中就已经出现，只是现在才开始流行起来。它提供了一种在CSS中使用HTML标记上的属性的简洁方法，并且在许多情况下可以帮助您省去过去对Javascript处理的需要。要使用此功能，您需要三个元素：一个:before或:afterCSS伪类样式、.content属性和一个带有您要使用的HTML属性名称的attr()表达式。比如你想在
标题上显示data-prefix属性的值，可以这样写：h3:before{content:attr(data-prefix)"";}Thisisaheading
显然，这个例子并没有展示它有多大用处，只是展示了它的基本用法。让我们尝试一个更有用的例子。attr()的一个出色应用是在用户打印页面时显示页面链接。为此，您可以这样写：@mediaprint{a:after{content:"(linkto"attr(href)")";}}- 来实现这种效果，你可以更灵活地在页面上使用自定义数字序列。关键是它真的很简单：将counter()添加到:before伪类中的内容属性：body{counter-reset:heading;}h4:before{反增量：标题；内容：“标题#”计数器（标题）“。”；}如果您想了解更多关于计数器清零和递增方法的信息，请参阅MozillaDeveloperNetwork上有关此主题的页面。有一个很好的例子说明如何使用嵌套计数器。使用calc()进行算术运算***，但同样重要的是，让我们谈谈calc()函数。该功能允许您执行简单的算术计算，例如计算元素的高度和宽度，使您免于编写难以维护的Javascript代码。此函数支持所有简单的基本算术运算，包括加、减、乘、除。假设您要创建一个元素来填充其父元素的宽度，但保留一些像素宽度用于其他用途：.parent{width:100%;边框：solidblack1px；职位：相对；}。孩子{位置：绝对;左：100px；宽度：计算（90%-100px）；背景颜色：#ff8；文本对齐：居中；漂亮，不是吗？更详细的介绍请参考W3CCSScalc规范。我们可以越来越清楚地发现，CSS已经足够成熟，可以在某些方面取代javascript，大大简化了Web开发人员的工作。如果您不开始利用这些功能，您就太傻了。【英文原文：你需要知道的三个CSS特性】原文链接：http://www.aqee.net/three-css-features-you-need-to-know-about/