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="#">网页</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="#">更多>></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后代选择器和子选择器详解的更多相关文章
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
前端html.CSS快速编写代码插件-Emmet使用方法技巧详解 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- 转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- 单元测试系列之十一:Jmockit之mock特性详解
本文是Jmockit学习过程中,根据官网所列的工具特性进行解读. 1.调用次数约束(Invocation count constraints) 可以通过调用计数约束来指定预期和/或允许匹配给定期望的调 ...
- 【HANA系列】SAP HANA XS的JavaScript API详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS的Java ...
- [转帖]HTTPS系列干货(一):HTTPS 原理详解
HTTPS系列干货(一):HTTPS 原理详解 https://tech.upyun.com/article/192/HTTPS%E7%B3%BB%E5%88%97%E5%B9%B2%E8%B4%A7 ...
- Git学习系列之Git基本操作提交项目(图文详解)
前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...
- 【转】HTTPS系列干货(一):HTTPS 原理详解
HTTPS系列干货(一):HTTPS 原理详解 前言 HTTPS(全称:HyperText Transfer Protocol over Secure Socket Layer),其实 HTTPS 并 ...
随机推荐
- IOS 音频的 使用说明
说明 ● 简单来说,音频可以分为2种 ● 音效 • 又称“短音频”,通常在程序中的播放时长为1~2秒 • 在应用程序中起到点缀效果,提升整体用户体验 ● 音乐 • 比如游戏中的“背景音乐”,一般播放时 ...
- IOS NSOperationQueue(线程 封装操作)
#import "HMViewController.h" @interface HMViewController () @end @implementation HMViewCon ...
- (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
- Uva 10791 最小公倍数的最小和 唯一分解定理
题目链接:https://vjudge.net/contest/156903#problem/C 题意:给一个数 n ,求至少 2个正整数,使得他们的最小公倍数为 n ,而且这些数之和最小. 分析: ...
- NYOJ(680),摘枇杷,(暴力,或者二分搜索)
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=680 很巧妙的一个题目,就是看你的逆向思维,result 一定是max(a[i])~sum ...
- Nginx + uWSGI + web.py 搭建示例
(1)安装Nginx1.1 下载nginx-1.0.5.tar.gz并解压1.2 ./configure (也可以增加--prefix= path指定安装路径)此时有可能会提示缺少pcre支持,如果要 ...
- word中磅和mm的换算
字号 磅 毫米数 初号 42 14.82 小初 36 12.70 一号 26 9.17 小一 24 8.47 二号 22 7.76 小二 18 6.35 三号 16 5.64 小三 15 5.29 四 ...
- CUDA 纹理内存
原文链接 1.概述 纹理存储器中的数据以一维.二维或者三维数组的形式存储在显存中,可以通过缓存加速访问,并且可以声明大小比常数存储器要大的多. 在kernel中访问纹理存储器的操作称为纹理拾取(tex ...
- 线程池,多线程,线程异步,同步和死锁,Lock接口
线程池 线程池,其实就是一个容纳多个线程的容器,其中的线程可以反复使用,省去了频繁创建线程对象的操作,无需反复创建线程而消耗过多资源. 除了创建和销毁线程的开销之外,活动的线程也需要消耗系统资源.线程 ...
- java高并发之CountDownLatch,CyclicBarrier和join
晚上打车回家,在车上看到一篇文章<22岁大学生获谷歌天价Offer,年薪千万!>,讲的是印度一个22岁大学生多次参加ACM大赛,开源多个项目,以非常牛逼的履历通过了谷歌的AI测试,斩获谷歌 ...