Css的选择器（4）
组合选择器
今天复习css选择器的最后一个内容，组合选择器，其实我觉得叫选择器的组合方法更加的贴切一点。光从名字就可以知道。这次我们不会学新的选择器了。就像做饭一样，之前的我们像是开始认识各种菜，各种调料，而这一节则是开始看菜谱，学习如何搭配才能炒出美味的菜来。下面开始我们的正文。
- 选择器组
形式如： A,B,C。ABC分别代表了不同的三个不同的选择器，可以是class选择器，也可以是id选择、标签选择器，属性选择器。就像一群人在上班，老师突然说张三，穿红衣服的人，课代表上讲台讲一下问题。那么，张三就像id选择器（暂时假定不会重名），穿红衣服的就像class选择器，课代表则是标签选择器，他们都得上台。同理选择器组也可以这样，随便组合，只要用逗号隔开就可以，css代码会在所有选择器上生效。
例：
index.html1
2
3
4
5
6
7
8
9
10
11
12
13
14<html>
<head>
<meta charset='utf8'>
<title>选择器组</title>
<link rel='stylesheet' href='./demo.css'>
</head>
<body>
<h1>我是课代表，以下是选择器组</h1>
<div id='zhangsan'>我叫张三</div>
<div class='wear'>我穿着红衣服</div>
<p class='wear'>我穿着红衣服</p>
<h2 class='wear'>我穿着红衣服</p>
</body>
</html>
demo.css1
2
3
4#zhangsan,.wear,h1{
color:#DAA520;
font-size: 30px;
}
在上面的例子中，我们涉及了多种标签，尤其是h1和h2标签，在默认情况下和其它标签在字体大小上会有比较大的区别，但在这里我们把他们同意设置成了大小30px，颜色为#DAA520。可以自己动手，敲下代码试一下。示例请查看组合选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html
- 后代选择器
除了id选择器，在正常的编码过程中，我们使用最多的要算后代选择器了。那么，什么是后代选择器呢？
所谓的后代选择器，就是被包裹标签的选择器。比去如下代码：上面代码中，parent就是父标签，child的就是子标签，即所谓的后代标签,形式就是父元素在前，子元素在后。因为parent下面只有一个div，所以child和div的指代都是相同的。在实际写代码中，我们可能在不同的地方都定义了相同的class，使用同一样式，但某一个地方需要有点特殊，那么这种后代标签就是其中一个选择。如：1
2
3
4
5
6
7
8
9
10
11
12
13<div class="parent">
<div class="child"></div>
</div>
<style>
.parent .child{
font-size: 20px;
color: #093812;
}
.parent div{
font-size: 20px;
color: #093812;
}
</style>demo.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<html>
<head>
<meta charset='utf8'>
<title>后代选择器</title>
<link rel='stylesheet' href='./demo.css'>
</head>
<body>
<div class='same-style'>我们都有同样的样式</div>
<div class='same-style'>我们都有同样的样式</div>
<div class='same-style'>我们都有同样的样式</div>
<div class='parent'>
<div class='same-style'>
我本来也可以和他们一样，有相同的样式，但是我的父元素的存在让我的样式被改变。
</div>
</div>
</body>
</html>示例请查看组合选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html1
2
3
4
5
6.same-style{
color: #DA70D6;
}
.parent .same-style{
color:#FFD700;
} - 子选择器
子选择器呢，和后代选择器实际上差不多。不过限制比后代选择器更多一点。从名字上也很容易理解，后代选择器范围更广。就像人类一样，说小强是大强的后代，那么这个小强，可以是大强的孙子，儿子，重孙，十八辈孙等。而说小强人是大强的儿子，那就只能是儿子喽。看例子。这就是子选择器的形式，仔细观察和上面有什么不同。上面的代码中，css样式只能对“我是parent的子代。”起作用，但用于继承，“我是parent的后代”也有和前面子代相同的样式。大家可以手敲一下试试。示例请看示例请查看子选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。在市里中，我对div设置了某认样式。对于这一节可能会比较难理解，先不要着急，在后面讲到继承的时候，再详细了解，现在知道有子选择器这一块就可以。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<div class="parent">
<div class="child">
我是parent的子代。
<div>我是parent的后代</div>
</div>
</div>
<style>
.parent>.child{
font-size: 20px;
color: #9932CC;
}
.parent>div{
font-size: 20px;
color: #9932CC;
}
</style> - 相邻兄弟选择器和通用兄弟选择器。
你是我的兄弟，还站在我后面，就是相邻选择器。如上面的代码中，b就是a的相邻选择器，c就是b的。 .a+div的样式会对2起作用。.b+div会在3起作用。示例请看示例请查看兄弟选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div>
<div class='a'>1</div>
<div class='b'>2</div>
<div class='c'>3</div>
<div class='d'>4</div>
<div class='e'>5</div>
</div>
<style>
.a+div{
color: red;
}
.b+div{
color: green;
}
</style>
通用选择器则比较大方，只要是兄弟就可以，不管位置。如下上面的代码，会在除了1以外的所有兄弟代码中生效。示例请看示例请查看通用选择器，若点击无效请复制链接到浏览器打开http://blog.wuhoushu.com/selector/selectotrs.html。1
2
3
4
5
6
7
8
9
10
11
12<div>
<div class='a'>1</div>
<div class='b'>2</div>
<div class='c'>3</div>
<div class='d'>4</div>
<div class='e'>5</div>
</div>
<style>
.a～div{
color: #EE2C2C;
}
</style>