css基础知识：组合选择器、兄弟选择器

组合选择器

今天复习css选择器的最后一个内容，组合选择器，其实我觉得叫选择器的组合方法更加的贴切一点。光从名字就可以知道。这次我们不会学新的选择器了。就像做饭一样，之前的我们像是开始认识各种菜，各种调料，而这一节则是开始看菜谱，学习如何搭配才能炒出美味的菜来。下面开始我们的正文。

选择器组

形式如： A,B,C。ABC分别代表了不同的三个不同的选择器，可以是class选择器，也可以是id选择、标签选择器，属性选择器。就像一群人在上班，老师突然说张三，穿红衣服的人，课代表上讲台讲一下问题。那么，张三就像id选择器（暂时假定不会重名），穿红衣服的就像class选择器，课代表则是标签选择器，他们都得上台。同理选择器组也可以这样，随便组合，只要用逗号隔开就可以，css代码会在所有选择器上生效。

例：

index.html

demo.css

在上面的例子中，我们涉及了多种标签，尤其是h1和h2标签，在默认情况下和其它标签在字体大小上会有比较大的区别，但在这里我们把他们同意设置成了大小30px，颜色为#DAA520。可以自己动手，敲下代码试一下。示例请查看组合选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html

上面代码中，parent就是父标签，child的就是子标签，即所谓的后代标签,形式就是父元素在前，子元素在后。因为parent下面只有一个div，所以child和div的指代都是相同的。在实际写代码中，我们可能在不同的地方都定义了相同的class，使用同一样式，但某一个地方需要有点特殊，那么这种后代标签就是其中一个选择。如：

demo.css

示例请查看组合选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html

子选择器

子选择器呢，和后代选择器实际上差不多。不过限制比后代选择器更多一点。从名字上也很容易理解，后代选择器范围更广。就像人类一样，说小强是大强的后代，那么这个小强，可以是大强的孙子，儿子，重孙，十八辈孙等。而说小强人是大强的儿子，那就只能是儿子喽。看例子。

这就是子选择器的形式，仔细观察和上面有什么不同。上面的代码中，css样式只能对“我是parent的子代。”起作用，但用于继承，“我是parent的后代”也有和前面子代相同的样式。大家可以手敲一下试试。示例请看示例请查看子选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。在市里中，我对div设置了某认样式。对于这一节可能会比较难理解，先不要着急，在后面讲到继承的时候，再详细了解，现在知道有子选择器这一块就可以。

相邻兄弟选择器和通用兄弟选择器。

你是我的兄弟，还站在我后面，就是相邻选择器。如

上面的代码中，b就是a的相邻选择器，c就是b的。 .a+div的样式会对2起作用。.b+div会在3起作用。示例请看示例请查看兄弟选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。

通用选择器则比较大方，只要是兄弟就可以，不管位置。如下

上面的代码，会在除了1以外的所有兄弟代码中生效。示例请看示例请查看通用选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。