CSS基本选择器容易被遗忘的

1、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

li + li {background: green;color: yellow; border: 1px solid #ccc;}

 上面代码表示选择li的相邻元素li，我们这里一共有十个li，那么上面的代码选择了从第2个li到 10 个li，一共九个

因为上面的li+li其中第二li是第一li的相邻元素，第三个又是第二个相邻元素，因此第三个也被选择，依此类推，所以后面九个li都被选中了，如果我们换过一种方式来看，可能会更好的理解一点：

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

 按照前面所讲的知识，这句代码很明显选择了li.active后面相邻的li元素，注意了和li.active后面相邻的元素仅只有一个的。

IE6不支持这个选择器

 

2、通用兄弟选择器（Ｅ 〜 Ｆ）通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话 说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。比如下面的代码：

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

 上面的代码所表示的是，选择中了li.active 元素后面的所有兄弟元素li

IE6不支持这种选择器的用法。

 

个人感觉：通用兄弟选择器比相邻兄弟选择器更灵活一些。

这两个都是css中不常用的选择器，在此记录下，容易忘记。

原文链接：www.w3cplus.com/css3/basic-selectors