1. #container {
2.    width: 960px;
3.    margin: auto;
4. }

ID选择符是唯一的，不允许重复使用。如果可能的话，请首先尝试使用一个标记名称，新的HTML5元素之一，或者是伪类。

兼容浏览器

• IE6+
• Firefox
• Chrome
• Safari
• Opera

1. .error {
2. color: red;
3. }

这是一个类选择。 ID和类之间的区别是，后者，你可以针对多个元素。使用类，适用于一组元素。

兼容浏览器

• IE6+
• Firefox
• Chrome
• Safari
• Opera

1. li a {
2. text-decoration: none;
3. }

选择当前选择器的下一个，当你需要更具体的选择器，可以使用这些。例如，如果你不是针对所有的锚标记，你只需要针对一个无序列表内的锚？这是特别适合你的选择。

兼容浏览器

• IE6+
• Firefox
• Chrome
• Safari
• Opera

1. a {color: red;}
2. ul {margin-left: 0;}

如果你想要得到网页上的所有元素，根据其类型，而不是一个ID或类名，怎么办？很简单，使用类型选择。如果您需要所有无序列表的目标，使用UL{}。

兼容浏览器

• IE6+
• Firefox
• Chrome
• Safari
• Opera

1. a {a:link: red;}
2. ul {a:visted: blue;}

我们使用伪类链接的目标尚未被点击的时候的效果。
另外，点击的其他效果，使我们能够适用于特定的造型上被点击，或访问的页面时候的效果。

兼容浏览器

• IE6+
• Firefox
• Chrome
• Safari
• Opera

1. ul + p {
2. color: red;}

这被称为相邻选择。它只选择当前元素之前的元素。在这种情况下，只有每个UL后的第一段有红色文字。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. div#container > ul {
2. border: 1px solid black;}

选择器XY，X> Y之间的区别是，后者只是当前的第一个选择器有效果。看了下面这个例子你就会很明白了。

选择器#container的ul边框只在第一个ul中实现，li中包含的ul就不会有border边框效果。
所以这个效果在工作使用的还是很多的，特别是当前工作和JavaScript的CSS选择器引擎结合。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. ul ~ p {
2. color: red;}

这种组合类似X + Y，但它不是那么严格。虽然相邻的选择（UL+ P）只能选择之前后面选择的第一个元素，这个会是更广义点。它会选择上面例子中的所有p元素，只要遵循UL。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. a[title] {
2. color: red;}

简称为属性选择，在我们上面的例子，这只会选择A标记中title属性。A标签不会有这个效果。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. a[href="http://www.kelelang.com"] {
2. color: red;}

上面的代码片段是样式链接到http://www.kelelang.com所有A标记，会看到链接色是红色。所有其他的A标签将不受影响。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. a[href*="tuts"] {
2. color: red;}

这正是我们需要的。指定链接地址初始属性值。这样一来，这会包括net.kelelang.com，mail.kelelang.com，甚至是kelelang.com。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. X[href^="http"] {
2. background: url(path/to/external/icon.png) no-repeat;}
3. padding-left: 10px;}

有没有想过一些网站是如何能够显示一个小图标，这是外部链接吗？。
这是最常用的正则表达式中指定字符串的开始。如果我们想要的目标有以http开头的HREF所有a标记，我们可以使用类似上面显示的片段的选择。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. a[href$=".jpg"] {
2. color: red;}

同样，我们使用一个正则表达式符号$是指字符串的结尾。在这种情况下，我们要搜索所有链接到图像的a – 或者是一个URL的JPG图形。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. a[data-filetype="image"] {
2. color: red;}

我们如何弥补所有的各种形象类型：PNG，JPEG，JPG，GIF？那么，我们可以创建多个选择，如：

1. a[href$=".jpg"],
2. a[href$=".jpeg"],
3. [href$=".png"],
4. a[href$=".gif"] {
5. color: red;}
6. }

data-filetype示例
Image Link

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. ul li:first-child {
2. border-top: none;}

这种结构性伪类允许我们的目标只有元素ul的第一li。你会经常使用这个删除的第一个和最后一个列表项的边界。
例如，假设你有一个行的列表，每一个有边框的顶部和边境底部。那么这个安排将在设置的第一个和最后一个项目看起来有点古怪。
适合去掉第一个和最后一个的边距。

兼容浏览器

• IE7+
• Firefox
• Chrome
• Safari
• Opera

1. ul li:last-child {
2. border-top: green;}

示例：

这里没有什么特别的，只是一个简单的的列表。

CSS

这个css会删除浏览器的默认UL，并应用每个li的位置和边框。

要添加到您列出的深度，适用于每个li是一个阴影或两个以上里的背景颜色暗边框底部。接下来，边框顶部是较轻的色调。

唯一的问题，在上面的图片所示，是一个边界将被应用到顶部和底部的无序的列表 - 这看起来很奇怪。让我们用：:first-child 和:last-child 来解决这个。

兼容浏览器

• IE9+
• Firefox
• Chrome
• Safari
• Opera