Although many new features of CSS3 are not supported by many browsers, or are not supported well. But as a front-end developer, you can't wait until all browsers fully support it before learning.
What new features does CSS3 bring us? Simply put, CSS3 can achieve many effects that previously required the use of images and scripts in just a few lines of code. Such as rounded corners, picture borders, text shadows and box shadows, etc. CSS3 not only simplifies the design process for front-end developers, but also speeds up page loading.
In this article, let us take a comprehensive look at the various new features of CSS3. Also don’t forget to check out some of our previous CSS tutorials and tips:
In order to use most CSS3 features, we have to use manufacturer-specific extensions along with the original properties. The reason is that until now, most browsers only support some CSS3 properties. And unfortunately, some properties may not even end up being recommended by the W3C, so it's important to distinguish them from standard properties by specifying browser-specific properties (and then use standards-compliant ones when they are redundant style will override it).
Of course, the disadvantage of this approach is that it will result in a messy style sheet and inconsistent performance of the site between browsers. After all, we don't want to reintroduce the need for private browser hacks in our stylesheets. Internet Explorer's infamous marquee, blink, and other tags were used in numerous style sheets and became a legend in the 1990s; they still make many existing websites (in other browsers) inconsistent or even difficult to read. . And we don’t want to put ourselves in the same situation now, right?
However, a website does not need to look exactly the same in all browsers. Sometimes it is possible to use private properties in a browser to achieve specific effects.
The most common private properties are for Webkit-based browsers (e.g., Safari), which start with -webkit-, and Gecko-based browsers (e.g., Firefox), which start with -moz-, and Konqueror (-khtml -), Opera (-o-) and Internet Explorer (-ms-) all have their own property extensions (currently only IE8 supports the -ms- prefix)
As professional designers, we have to be aware that using these private properties will make our style sheets fail to pass validation . So putting them into the final version of the style is currently rare. But in some cases, such as experimentation or learning, we can at least consider writing them into a style sheet together with standard CSS properties.
CSS selectors are incredibly powerful tools: they allow us to specify specific HTML elements in tags without having to use redundant classes, IDs, or JavaScripts. And most of them are not newly added to CSS3, but have not been widely used as they should be. Advanced selectors are very useful if you are trying to achieve a clean, lightweight tag and better separation of structure and performance. They can reduce the number of classes and IDs in tags and make it easier for designers to maintain style sheets.
Three new attribute selectors were added to CSS3:
[att^="value"][att$="value"][att*="value"]value attribute of the element
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。
连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：
div~img {
border: 1px solid #ccc;
}
浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6 ！
伪类
或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：
- :nth-child(n)
让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：
:nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/ - :nth-last-child(n)
与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：
div p:nth-last-child(-n+2) - :last-child
匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1) - :checked
匹配选择的元素，比如复选框 - :empty
匹配空元素（没有子元素）。 - :not(s)
匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写：
p:not([class*="lead"]) { color: black; }Andrea Gandino在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落，并将其的外间距(margin)设置为0:
#primary .text p:last-child { margin: 0; }浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。
伪元素
在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。
浏览器支持:目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。
扩展阅读