首先我得承认，做了web这么多年，虽然javascript还可以，但是css和美工确实还是在水与不是很水之间徘徊，如我等做个项目从UI上一个icon到数据库里一个字段的长度都要自己搞定的码工，花在UI上面的时间相对其他部分较长，也是最头痛，总是眼巴巴的期望个美女美工哈（¯﹃¯），总也盼不来。后来了解到International Big Mouse这个公司做web的同事也是没有美工的，心想美工莫非神人也。

ok废话不多说。

兄弟选择器有+和~

看下面的代码:

样式 p+p{color:red;} 的效果

这是一个标题

这是一个文字段落1

这是一个文字段落2

这是一个文字段落2.1

这是一个标题

这是一个文字段落3

这是一个标题

这是一个文字段落4

这是一个文字段落5

样式p~p{color:red;} 的效果

这是一个标题

这是一个文字段落1

这是一个文字段落2

这是一个文字段落2.1

这是一个标题

这是一个文字段落3

这是一个标题

这是一个文字段落4

这是一个文字段落5

看到区别没:

p+p效果是先找到p,然后找其后面紧接着的p，这里的意思是说，这是一个文字段落3 这个p与这是一个文字段落1 这个p 就不是紧接着的关系，因为中间被一个标题打断了,而段落5相对于段落4同理。

p~p则不管这些，凡是第一个p后面的p元素，不管中间隔了几个其他元素，都会被此选择器选中。