html:(28):后代选择器和通用选择器

包含(后代)选择器

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}.food li{border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>
</head>
<body><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li>
</ul></body>
</html>

运行结果

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 选择符</title>
<style type="text/css">
* {color:red;font-size:20px;
}</style>
</head>
<body><h1>勇气</h1><p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

运行结果

html:(28):后代选择器和通用选择器相关推荐

CSS入门、基本选择器和组合选择器
CSS的基本使用定义注释样式行内样式内部样式外部样式优先级 <head><meta charset="utf-8"><title> ...
css的基本选择器和高级选择器
css选择器:指定css要作用的标签,即选择哪个容器,更改它的样式 css选择器主要分为两大类:基本选择器和高级选择器基本选择器: 元素选择器(标签选择器) id选择器类选择器(class选择器) ...
html5通用兄第选择器,css 通用兄弟选择器( ~ )
stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
[css] 相邻兄弟选择器.后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器. 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格)子选择器:包括父元 ...
CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器建立在基础选择器上,对基本选择器进行组合形成的可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器一.后代选择器又称为包含选择器,可以选 ...
后代选择器和子选择器
后代选择器什么是后代选择器找到标签的后代标签,设置属性. 格式: 标签名称1 标签名称2 ....{属性:值; } 先找到名称叫做标签1的标签,然后再这个标签下面去查找所有名称叫做标签2的标签一直 ...
jquery后代选择器和子选择器区别
jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器层次选择器: 难点: jquery中子元素和后代元素的区别后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往 ...

html:(28):后代选择器和通用选择器

包含(后代)选择器

通用选择器

html:(28):后代选择器和通用选择器相关推荐

最新文章

热门文章