一、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="#">网页</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="music" href="#">音乐</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="video" href="#">视频</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="image" href="#">图片</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="tieba" href="#">贴吧</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="zhidao" href="#">知道</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="news" href="#">新闻</a><a hidefocus="true" class="tab tab-hook g-fc0" data-tab="map" href="#">地图</a><a hidefocus="true" class="tab more g-fc0" style="" href="#">更多&gt;&gt;</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后代选择器和子选择器详解的更多相关文章

  1. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  2. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  3. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  4. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  5. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  6. 单元测试系列之十一：Jmockit之mock特性详解

    本文是Jmockit学习过程中,根据官网所列的工具特性进行解读. 1.调用次数约束(Invocation count constraints) 可以通过调用计数约束来指定预期和/或允许匹配给定期望的调 ...

  7. 【HANA系列】SAP HANA XS的JavaScript API详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS的Java ...

  8. [转帖]HTTPS系列干货（一）：HTTPS 原理详解

    HTTPS系列干货(一):HTTPS 原理详解 https://tech.upyun.com/article/192/HTTPS%E7%B3%BB%E5%88%97%E5%B9%B2%E8%B4%A7 ...

  9. Git学习系列之Git基本操作提交项目（图文详解）

    前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...

  10. 【转】HTTPS系列干货（一）：HTTPS 原理详解

    HTTPS系列干货(一):HTTPS 原理详解 前言 HTTPS(全称:HyperText Transfer Protocol over Secure Socket Layer),其实 HTTPS 并 ...

随机推荐

  1. April 16 2017 Week 16 Sunday

    Happiness is a way station between too much and too little. 幸福就是刚刚好. I don't want to talk about it a ...

  2. mysql主从分离

    1.工具: 两台机器 master:192.168.0.1 slave:192.168.0.2 2.master的配置 找到mysql的配置文件,一般centos的是/etc/my.cnf,ubunt ...

  3. 温故而知新：Asp.Net中如何正确使用Session

    原文链接作者:菩提树下的杨过出处:http://yjmyzz.cnblogs.com Asp.Net中的Session要比Asp中的Session灵活和强大很多,同时也复杂很多:看到有一些Asp.Ne ...

  4. 后缀数组入门（二）——Height数组与LCP

    前言 看这篇博客前,先去了解一下后缀数组的基本操作吧:后缀数组入门(一)--后缀排序. 这篇博客的内容,主要建立于后缀排序的基础之上,进一步研究一个\(Height\)数组以及如何求\(LCP\). ...

  5. 5、Oracle备份(oracle备份脚本配置)

    1.1 Oracle数据库备份 1.1.1 链接Oracle介质管理库 请在数据库节点上操作. [oracle@db01/usr/openv/netbackup/bin]$ ./oracle_link ...

  6. 【转】Data URL和图片，及Data URI的利弊

    Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...

  7. 递归函数之阶乘和字符串反转－基于R和Python

    Python课第五周开始讲函数了.递归函数.递归在python中不能超过900多层,否则报错内存溢出什么的.同样在R中递归太深也会报错,阈值和python中大概一样,900多次就报错了. error ...

  8. innerHTML动态添加标签的注意事项

    在使用javascript动态添加页面上元素时,我们经常会使用DOM去逐个地将节点添加到文档碎片中,再将整个文档节点添加到DOM树中.其实还有一种方法动态添加元素:innerHTML. 我最近要将一大 ...

  9. Spring 学习之bean的理解

    前言:对于使用Spring框架的开发人员来说,我们主要做的主要有两件事情:①开发Bean;②配置Bean;而Spring帮我们做的就是根据配置文件来创建Bean实例,并调用Bean实例的方法来完成“依 ...

  10. margin与padding大比拼

    用margin还是用padding这个问题相信是每个学css的人都想要去深入了解的. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距 ...