CSS系列(8) CSS后代选择器和子选择器详解

时间 2019-12-09

标签 css 系列后代选择器详解栏目 CSS 繁體版

原文原文链接

1、CSS后代选择器详解css

1，生动介绍基本概念html

一个标签嵌B在另外一个标签A内部，B就是A的后代。web

并且，B的后代也是A的后代，这就叫“子子孙孙无穷尽也”。浏览器

好比：网络

<div>ide

<p>这个p标签是div的后代</p>学习

<div>字体

后代选择器就是用来选择一个标签的后代的；网站

两个选择器中间添加一个【空格】就构成了后代选择器，空格后面的那个是后代。设计

例如：

div p { color : red; }

它会选择一堆的p标签，只要这个p标签是嵌套在某个div标签内部的，也就是只要p有一个爹或祖先是div就行。

那么，选中的p标签内部的字体，都会被设置为红色。

2，具体例子一个

新建一个网页a.html，复制下面的内容

<html>

<head>

.YeYe div { color : red; }

</style>

</head>

<body >

爷爷

<div>

爸爸

<div >

我

</div>

<div>

叔叔

<div>

堂弟

</div>

</body>

</html>

在浏览器中查看，效果图以下：

过春节了，爷爷给后代都发了红包，所以把后代都设置为了红色字体。

.YeYe div { color : red; }

这里给爷爷添加了一个类 YeYe；

爸爸、叔叔、我、堂弟，都是div，咱们又都是爷爷的后代；

所以使用后代选择器，对咱们设置一个相同的样式就特别简单。

3，注意事项

(1) 避免类名泛滥

自从出现了CSS，就有点使用类名泛滥。

动不动就给不少标签添加类名，而后使用类名选择器设置样式，当有过多的类名的时候，你的html结构其实已经被污染了，或者你的html设计有问题。

像这个例子，一些人可能就会给爸爸、叔叔、我、堂弟分别添加上类名，而后统一设置一下样式，这就不如使用后代选择器。

给你说个类名泛滥的例子吧，你们看看下面的这段html源代码，

</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就被选中了。

参考文章：

2、CSS子选择器详解

1，基本概念介绍

子就是儿子。

子选择器说的就是选择一个标签的儿子。

好比

<div>

<p>这个p标签是div的儿子</p>

<div>

这个p标签是div的下一级，嵌套在div内部，它就是div的儿子。

和后代选择器不一样的是，在两个标签中间使用【>】就构成了子选择器。

好比

div > p { color : red; }

这里就设置div的儿子p的字体为红色。

2，例子

新建一个网页a.html，复制粘贴下面的内容

<html>

<head>

.YeYe div { color : red; }

.YeYe > div { margin-left: 50px; }

</style>

</head>

<body >

爷爷

<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>

.YeYe div { color : red; }

.YeYe > div { margin-left: 50px; }

.YeYe > div > div { margin-left: 50px; }

</style>

</head>

<body >

爷爷

<div>

爸爸

<div >

我

</div>

<div>

叔叔

<div>

堂弟

</div>

</body>

</html>