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

<div id="container"><ul><li> List Item<ul><li> Child </li></ul></li><li> List Item </li><li> List Item </li><li> List Item </li></ul>
</div>

ul ~ p {color: red;
}

a[title] {color: green;
}

a[href="http://strongme.cn"] {color: #1f6053; /* nettuts green */
}

a[href*="strongme"] {color: #1f6053;
}

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

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

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

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {color: red;
}

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

a[data-info~="external"] {color: red;
}a[data-info~="image"] {border: 1px solid black;
}

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {color: red;
}/* And which contain the value "image" */
a[data-info~="image"] {border: 1px solid black;
}

input[type=radio]:checked {border: 1px solid black;
}

.clearfix:after {content: "";display: block;clear: both;visibility: hidden;font-size: 0;height: 0;}.clearfix { *display: inline-block; _height: 1%;
}

div:hover {background: #e3e3e3;
}

a:hover {border-bottom: 1px solid black;
}

div:not(#container) {color: blue;
}

:not(p) {color: green;
}

p::first-line {font-weight: bold;font-size:1.2em;
}

p::first-letter {float: left;font-size: 2em;font-weight: bold;font-family: cursive;padding-right: 2px;
}

上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。

它通常在一些新闻报刊内容的重点突出会使用到。

定位某段的第一行

p::first-line {font-weight: bold;font-size: 1.2em;
}

跟::first-line相似，会选中段落的第一行 。

为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如:first-line,:first-letter,:before,:after.但是这个兼容对新介绍的特性不起作用。

22 selector:nth-child(n) ： 伪类选择器

li:nth-child(3) {color: red;
}

还记得我们面对如何取到堆叠式标签的第几个元素时无处下手的时光么，有了nth-child那日子就一去不复返了。

请注意nth-child接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).

我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。

23 selector:nth-last-child(n) ： 伪类选择器

li:nth-last-child(2) {color: red;
}

假设你在一个ul标签中有N多的元素，而你只想获取最后三个元素，甚至是这样li:nth-child(397)，你可以用nth-last-child伪类去代替它。

24 selectorX:nth-of-type(n) ： 伪类选择器

ul:nth-of-type(3) {border: 1px solid black;
}

曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。

想象一下有5个ul标签。如果你只想对其中的第三个进行修饰，而且你也不想使用id属性，那你就可以使用nth-of-type(n)伪类来实现了，上面的那个代码，只有第三个ul标签会被设置边框。

25 selector:nth-last-of-type(n) ： 伪类选择器

ul:nth-last-of-type(3) {border: 1px solid black;
}

同样，也可以类似的使用nth-last-of-type来倒序的获取标签。

26 selector:first-child ： 伪类选择器

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

这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。

假设有个列表，每个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。

27 selector:last-child ： 伪类选择器

ul > li:last-child {color: green;
}

跟first-child相反，last-child取的是父标签的最后一个标签。
例如
标签

<ul><li> List Item </li><li> List Item </li><li> List Item </li>
</ul>

这里没啥内容，就是一个了 List。

ul {width: 200px;background: #292929;color: white;list-style: none;padding-left: 0;
}li {padding: 10px;border-bottom: 1px solid black;border-top: 1px solid #3c3c3c;
}

上面的代码将设置背景色，移除浏览器默认的内边距，为每个li设置边框以凸显一定的深度。

28 selector:only-child ： 伪类选择器

div p:only-child {color: red;
}

说实话，你会发现你几乎都不会用到这个伪类。然而，它是相当有用的，说不准哪天你就会用到它。

它允许你获取到那些只有一个子标签的父标签下的那个子标签。就像上面那段代码，只有一个段落标签的div才被着色。

<div><p> My paragraph here. </p></div>
<div><p> Two paragraphs total. </p><p> Two paragraphs total. </p>
</div>

上面例子中，第二个div不会被选中。一旦第一个div有了多个子段落，那这个就不再起作用了。

29 selector:only-of-type： 伪类选择器

li:only-of-type {font-weight: bold;
}

结构性伪类可以用的很聪明。它会定位某标签下相同子标签的只有一个的目标。设想你想获取到只有一个子标签的ul标签下的li标签呢？

使用ul li会选中所有li标签。这时候就要使用only-of-type了。

ul > li:only-of-type {font-weight: bold;

最后记住：使用像jQuery等工具的时候，尽量使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。
如果还有同学对 nth-of-type 与 nth-child的认识还是不明确，可以移步到深入理解css3中nth-child和 nth-of-type的区别这篇文章。