因为上面的li+li其中第二li是第一li的相邻元素，第三个又是第二个相邻元素，因此第三个也被选择，依此类推，所以后面九个li都被选中了，如果我们换过一种方式来看，可能会更好的理解一点：
.active + li {background: green;color: yellow; border: 1px solid #ccc;}
按照前面所讲的知识，这句代码很明显选择了li.active后面相邻的li元素，注意了和li.active后面相邻的元素仅只有一个的。如图：
IE6不支持这个选择器
八、通用兄弟选择器（Ｅ 〜 Ｆ）
通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。比如下面的代码：
复制代码.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
上面的代码所表示的是，选择中了li.active 元素后面的所有兄弟元素li,如图所示：
通用兄弟选择器和相邻兄弟选择器极其相似，只不过，相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元素）；而通用兄弟元素选择器，选中的是元素相邻的后面兄弟元素，这样说起来可能会有迷糊，大家可以仔细看看其相邻兄弟的效果图。
IE6不支持这种选择器的用法。
九、群组选择器（selector1,selector2,…,selectorN）
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，如上面所示selector1,selector2,…,selectorN。这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。我们来看一个简单的例子：
复制代码.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
因为li.first和li.last具有相同的样式效果，所以我们把他们写到一个组里来：
所有浏览器都支持群组选择器。
上面九种选择器是CSS3中的基本选择器，而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器，同时大家可以在实际应用中把这些选择器结合起来使用，达到目的就行了。那么关于CSS3选择器的第一部分——基本选择器就介绍到这里，有点简单，希望对初次接触CSS的同学有所帮助，下节将介绍CSS3选择器的第二部分——属性选择器，感兴趣的朋友请观注本站的更新。
