今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”，刚开始对这个概念有些不太理解，通过查阅资料并且经过一些试验总算有了些头绪。
原文解释是“相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。”
这里面有2个关键信息：（1）紧接在另一元素后；（2）二者有相同父元素
&!DOCTYPE html&
&!--[if lt IE 7]&
&html class="no-js lt-ie9 lt-ie8 lt-ie7"& &![endif]--&
&!--[if IE 7]&
&html class="no-js lt-ie9 lt-ie8"& &![endif]--&
&!--[if IE 8]&
&html class="no-js lt-ie9"& &![endif]--&
&!--[if gt IE 8]&&!--& &html class="no-js"& &!--&![endif]--&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&title&&/title&
&meta name="description" content=""&
&meta name="viewport" content="width=device-width, initial-scale=1"&
background-color: aqua;
&!--[if lt IE 7]&
&p class="browsehappy"&You are using an &strong&outdated&/strong& browser. Please &a href="#"&upgrade your browser&/a& to improve your experience.&/p&
&![endif]--&
&p&第零个段落&/p&
&p&第一个段落&/p&
&p&第二个段落&/p&
&p&第三个段落&/p&
&p&第四个段落&/p&
div+p表示选取了所有位于 &div& 元素后的第一个 &p& 元素
上述“第零个段落”和“第一个段落”没有被选中，是因为它们都嵌套在了&div&标签中，而不是标签后面的元素；
“第二个段落”被选中，是因为这个&p&标签是&div&标签后的第一个&p&元素，且有相同的父元素&body&；
“第三个段落”和“第四个段落”没被选中是因为它们不是&div&标签后紧邻的&p&标签
假如希望"第三个段落"也被选中，则需要使它的&p&标签也在&div&标签之后紧邻，如下
如果&p&标签不是紧邻&div&，如下
可以看到“第二个段落”没有被选中，因为相邻兄弟选择器选择的是紧接在一个元素后的元素
div+p{}表示的是选取&div&后紧邻的&p&元素，但是上面代码div标签后紧邻的是&span&标签，也就是它会选择&div&标签后紧邻的&span&标签，&p&标签没有紧邻&div&标签，所以就选不到&p&元素了
&!DOCTYPE html&
&!--[if lt IE 7]&
&html class="no-js lt-ie9 lt-ie8 lt-ie7"& &![endif]--&
&!--[if IE 7]&
&html class="no-js lt-ie9 lt-ie8"& &![endif]--&
&!--[if IE 8]&
&html class="no-js lt-ie9"& &![endif]--&
&!--[if gt IE 8]&&!--& &html class="no-js"& &!--&![endif]--&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&title&&/title&
&meta name="description" content=""&
&meta name="viewport" content="width=device-width, initial-scale=1"&
background-color: aqua;
&!--[if lt IE 7]&
&p class="browsehappy"&You are using an &strong&outdated&/strong& browser. Please &a href="#"&upgrade your browser&/a& to improve your experience.&/p&
&![endif]--&
&li&List item 1&/li&
&li&List item 2&/li&
&li&List item 3&/li&
&li&List item 1&/li&
&li&List item 2&/li&
&LI&List item 3&/LI&
一开始特别纳闷为啥“List item 2”和“List item 3”都被选中了~~~
首先分析选择器样式：li+li{}，字面意思是选取所有位于 &li& 标签后的第一个 &li& 元素
(1) 很显然第一个&li&标签不会选中，因为它前面不是&li&；
(2) 第二个&li&标签会选中，因为它是第一个&li&标签紧邻的&li&标签；
(3) 第三个&li&标签也会选中：因为第三个&li&标签的上一个标签也是&li& 标签，也满足css选择器li+li{}的条件：&li&标签后的第一个&li&元素
正因为css选择器的样式为li+li{}，所以代码中的li标签就可以一直套用这个“公式”。
如有错误，敬请指正，不吝赐教！
阅读(...) 评论()CSS技巧:子选择器、相邻同胞选择器与属性选择器
在CSS布局网页开发中，我们还会用到一常非常有用的选择器，可以用它来进行整体布局声明，这就是通用选择器。看下面的代码：
padding:0;
　　这种形式的代码一般不会多次出现，在页面代码中出现一次而已，但它的功能是非常强大的，在计算机领域中一般情况下都约定“*”为通配符，它的声明将会
作用于页面中所有的可用元素，使用它可以定义一些页面中基本的规则，如边距margin、填充padding、字体font-family、文字大小
font-size、背景颜色background-color等等。
　　由于某些浏览器不支持或支持的不够好，下面所介绍的三种选择器并不是非常的常用，至少目前的情况是这样的，但随着时间的推移，某些功能还是非常
有用的，我们简单了解一下子选择器、相邻同胞选择器与属性选择器。
　　请注意这个选择器与后代选择器的区别，子选择器（child
selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选
择，而子选择器是通过“&”进行选择，我们看下面的代码：
& #links a {color:}
#links & a {color:}
&p id="links"&
&a href="教
&a href="布
局实例&/a&
&a href="教
　　我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。当然，或许你的浏览器并不支持这样的CSS选择符。我
们在一开始也强调了不太兼容的现状。
相邻同胞选择器
　　我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个
段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码：
& h1 + p {color:blue}
&h1&cuijiaye.com.cn是一个非常专业的CSS站点&/h1&
&p&在cuijiaye.com.cn的Div+CSS教程中，介绍了很多关于CSS网页布局的知识。&/p&
&p&在cuijiaye.com.cn的CSS布局实例中，有很多与CSS布局有关的案例。&/p&
　　我们将会看到第一个段落“在cuijiaye.com.cn的Div+CSS教程中，介绍了很多关于CSS网页布局的知识。”文字颜色将会是蓝色。而
第二段则不受此CSS样式的影响。
属性选择器
　　这个选择器也有点复杂，在实际应用中对于新手来说还很遥远，它是根据某个属性是否存在或属性的值来找到目标元素，是一个非常有意思的功能，如果
能做到灵活运用，其效果也会非常强大。关于这一块的知识我们以后在cuijiaye.com.cn的文章中详细说明。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。兄弟选择器 &
张鑫旭-鑫空间-鑫生活CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器
CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器
1.子元素选择器。选择作为某元素的子元素的元素。
格式：父元素 & 子元素
h1 & strong { color：red；}
&h1&·············&strong&···&/strong&·············&/h1&
//可以匹配
&h1&····&em&···&strong&···&/strong&···&/em&····&/h1&
//不可以匹配
注1：与后代选择器的区别在于，子元素选择器两个元素只能是父子关系，而后代选择器只要是后代就行了。在上例中，&strong&是&em&的儿子，是&h1&的孙子。
注2：若&h1&中有多个&strong&，全部选择。例如
&h1&···&strong&···&/strong&···&strong&··&/strong&···&/h1&
//可以匹配
2.相邻兄弟选择器。选择有相同父元素的两个挨着的元素的后一个元素。
格式：元素1 + 元素2 {声明}
h1 + p { color：red；}
&h1&······&/h1&
&p&·······&/p& //可以匹配
&a&······&/a&
&p&·······&/p& //不可以匹配
li + li { color：red；}
&li&······&/li&
&li&······&/li&
//可以匹配，上一个&li&的兄弟
&li&······&/li&
//可以匹配，上一个&li&的兄弟
3.普通兄弟选择器。选择有相同父元素的两个元素中，第一个元素后所有的第二个元素。
格式：元素1 ~ 元素2 { color：red；}
h1 ~ p { color：red；}
&h1&······&/h1&
&p&·······&/p& //可以匹配
&a&······&/a&
&p&·······&/p& //可以匹配
&h2&······&p&···&/p&······&/h2&
//不可以匹配
4.不论是后代选择器，子元素选择器，相邻兄弟选择器还是普通兄弟选择器，
选择的都是：最后面的（挨着花括号的）元素。
5.选择器可以组合使用，例如：
div.maincontent
h1 + p & a:link
没有更多推荐了，相邻兄弟选择器
此选择器可以匹配指定元素紧邻的元素.E + F以上代码是创建兄弟选择器的格式。E + F & &相邻兄弟选择器 & &选择匹配F的元素，且该元素为所匹配E元素后面相邻的位置。 & &E和F必须具有同一个父元素，F必须在E的后面且相邻，代码实例如下:&!DOCTYPE&html&
&meta&charset=&&utf-8&&
&meta&name=&author&&content=&http://ask.php.cn/&&/&
&title&php中文网&/title&
&style&type=&text/css&&
li{color:blue}
.antzone+li{
&&&li&php中文网一&/li&
&&&li&class=&antzone&&php中文网二&/li&
&&&li&php中文网三&/li&
&&&li&php中文网四&/li&
&/html&以上代码可以antzone紧邻的li元素的字体颜色设置为红色。
&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&author& content=&http://ask.php.cn/& /&
&title&CSS的相邻选择符&/title&
&style type=&text/css&&
color: #cfff2e
&div&php中文网一&/div&
&p&php中文网二&/p&
&span&php中文网三&/span&
&p&php中文网四&/p&
章节
笔记
提问
CSS3从入门到精通教程
第1章 初识CSS
第2章 边框
第3章 CSS3颜色
第4章 文字与字体
第5章 CSS3 背景
第6章 CSS3基本选择器
第7章 CSS3属性选择器
第8章 CSS3伪类选择器
第9章 变形效果
第10章 CSS3布局相关样式
第11章 CSS3内容样式相关
课件暂不提供下载，工作人员正在整理中，后期请多关注该课程~
看过该课程的同学也在学}