首页 > 代码库 > CSS系列(8) CSS后代选择器和子选择器详解
CSS系列(8) CSS后代选择器和子选择器详解
一、CSS后代选择器详解
1， 生动介绍基本概念
一个标签嵌B在另一个标签A内部，B就是A的后代。
而且，B的后代也是A的后代，这就叫“子子孙孙无穷尽也”。
比如：
<div>
<p>这个p标签是div的后代</p>
<div>
后代选择器就是用来选择一个标签的后代的；
两个选择器中间添加一个【空格】就构成了后代选择器，空格后面的那个是后代。
例如：
div p { color : red; }
它会选择一堆的p标签，只要这个p标签是嵌套在某个div标签内部的，也就是只要p有一个爹或祖先是div就行。
那么，选中的p标签内部的字体，都会被设置为红色。
2， 具体例子一个
新建一个网页a.html，复制下面的内容
<html>
<head>
<style type="text/css">
.YeYe div { color : red; }
</style>
</head>
<body >
<div class="YeYe">
爷爷
<div>
爸爸
<div >
我
</div>
</div>
<div>
叔叔
<div>
堂弟
</div>
</div>
</div>
</body>
</html>
在浏览器中查看，效果图如下：
过春节了，爷爷给后代都发了红包，因此把后代都设置为了红色字体。
.YeYe div { color : red; }
这里给爷爷添加了一个类 YeYe；
爸爸、叔叔、我、堂弟，都是div，我们又都是爷爷的后代；
因此使用后代选择器，对我们设置一个相同的样式就特别简单。
3， 注意事项
(1) 避免类名泛滥
自从出现了CSS，就有点使用类名泛滥。
动不动就给很多标签添加类名，然后使用类名选择器设置样式，当有过多的类名的时候，你的html结构其实已经被污染了，或者你的html设计有问题。
像这个例子，一些人可能就会给爸爸、叔叔、我、堂弟分别添加上类名，然后统一设置一下样式，这就不如使用后代选择器。
给你说个类名泛滥的例子吧，大家看看下面的这段html源代码，
<div class="right tabs" monkey="search" alog-alias="search">
<a hidefocus="true" class="tab tab-hook s-bg20 g-fc5 g-fc5h curr curr-hook" data-tab="web" href="http://www.mamicode.com/#">网页</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="music" href="http://www.mamicode.com/#">音乐</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="video" href="http://www.mamicode.com/#">视频</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="image" href="http://www.mamicode.com/#">图片</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="tieba" href="http://www.mamicode.com/#">贴吧</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="zhidao" href="http://www.mamicode.com/#">知道</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="news" href="http://www.mamicode.com/#">新闻</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="map" href="http://www.mamicode.com/#">地图</a><a hidefocus="true" class="tab more g-fc0" style="" href="http://www.mamicode.com/#">更多>></a>
</div>
是不是使用了很多类名，每个a标签都有重复的类名tab tab-hook g-fc0
大家知道这是哪个网站的源代码吗？
这是我复制hao123.com菜单中的源代码。
这可是大名鼎鼎的hao123网站导航网啊。居然犯这种错误。
不过，我们也不能怪设计人，hao123的创始人李兴平以前是一个网吧管理员，和专业的前段开发工程师比起来当然不行。
不过，他凭借敏锐的市场嗅觉、吃苦耐劳的精神、中国网络起步的时机，创办了hao123导航网，这一点可是值得我们所有人学习啊。
2004年8月，百度以1190万元和4万股股票收购了hao123。
当时，李兴平也是舍不得卖掉自己的孩子啊，对于每一个站长来说，自己的网站都是自己的孩子，但是他实在是想不出来hao123的下一步发展方向是哪里，因此就卖给了百度。
从李兴平的身上，我们可以学习到，技术，并不是最重要的成功因素，成功是很多因素凑到一起得来的，就像打麻将，三缺一是打不好的。
(2) 后代选择器是从右向左开始的
比如下面这个例子
div p { color : red; }
浏览器会先找到所有的p标签，因为浏览器是从右向左看的，不像我们人眼，是从左向右看的。
找到一个p后，它会向上找，看看有没有标签div，如果p有一个爹或祖先是div，那么这个p就被选中了。
参考文章：
二、CSS子选择器详解
1， 基本概念介绍
子就是儿子。
子选择器说的就是选择一个标签的儿子。
比如
<div>
<p>这个p标签是div的儿子</p>
<div>
这个p标签是div的下一级，嵌套在div内部，它就是div的儿子。
和后代选择器不同的是，在两个标签中间使用【>】就构成了子选择器。
比如
div > p { color : red; }
这里就设置div的儿子p的字体为红色。
2， 例子
新建一个网页a.html，复制粘贴下面的内容
<html>
<head>
<style type="text/css">
.YeYe div { color : red; }
.YeYe > div { margin-left: 50px; }
</style>
</head>
<body >
<div class="YeYe">
爷爷
<div>
爸爸
<div >
我
</div>
</div>
<div>
叔叔
<div>
堂弟
</div>
</div>
</div>
</body>
</html>
效果图如下：
这里设置了爷爷div的后代都为红色字体，代码如下：
.YeYe div { color : red; }
然后又设置了爷爷的儿子左外边距为50px，就是让儿子都退后50步：
.YeYe > div { margin-left: 50px; }
因为我和堂弟的爹都后退了50步，我们是嵌套在爹的里面的，也跟着后退了50步。
如果你在添加上下面的样式：
.YeYe > div > div { margin-left: 50px; }
那么，我相对我爹、堂弟相对叔叔，各自退后50步，效果图如下：
现在辈分不乱了，爷爷第一级，爸爸和叔叔第二级，我和堂弟第3级，而且使用CSS让html表现出来的样式也有层次感了。
完整的代码如下：
<html>
<head>
<style type="text/css">
.YeYe div { color : red; }
.YeYe > div { margin-left: 50px; }
.YeYe > div > div { margin-left: 50px; }
</style>
</head>
<body >
<div class="YeYe">
爷爷
<div>
爸爸
<div >
我
</div>
</div>
<div>
叔叔
<div>
堂弟
</div>
</div>
</div>
</body>
</html>
CSS系列(8) CSS后代选择器和子选择器详解