ul + p { color: red;}
临近选择器 (adjacent selector)，选取紧邻在 X 元素后面出现的第一个元素，比如上面这段代码将选取 ul 元素后出现的第一个元素，也就是 p 元素。
兼容性 IE6+
8.
X > Y
div#container > ul { border: 1px solid black;}
在第 4 条中，后代选择器
X Y 选取父层 X 内的所有 Y 元素；子选择器
X > Y 则只选取直接出现在父层 X 内的 Y 元素。比如下面的 HTML 结构中，
#container > ul 选取直接出现在
div#container 内的 ul 元素，不包含嵌套在 li 内的 ul 元素：<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>
兼容 IE6+
9.
X ~ Y
ul ~ p { color: red;}
同样也是临近选择器，前面第 7 条
X + Y 选取紧邻在 X 后出现的第一个元素，而
X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul 元素后出现的所有同级 p 元素，而不是像
ul + p 这样选取第一个出现的 p 元素。兼容 IE7+
10.
X[title]
a[title] { color: green;}
属性选择器 (attributes selector)，根据元素使用的属性进一步缩小选取范围，上面这段代码将选取所有使用了
title 属性的链接，或者
a[title="title content"]{color:green} 再进一步缩小选取范围。兼容 IE7+
11.
X[href="foo"]
a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */}
上面这段代码将选取所有跳转到
http://net.tutsplus.com 的链接，这些链接将显示为绿色，其他链接不受影响。只是这种方式很严格不能相差一个字符，下面将会逐一介绍更灵活的用法。
