《Web前端开发基础》课件-视频3 关系选择器_第1页
《Web前端开发基础》课件-视频3 关系选择器_第2页
《Web前端开发基础》课件-视频3 关系选择器_第3页
《Web前端开发基础》课件-视频3 关系选择器_第4页
《Web前端开发基础》课件-视频3 关系选择器_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSS基础

--关系选择器01后代选择器子元素选择器02目录关系选择器是依据元素在其位置的上下文关系进行选择，也叫做派生选择器、父子选择器，在CSS1.0称作上下文选择器。比如每个人在自己的家族中都有其位置：祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿1后代选择器（1）定义可以选择其元素后代的元素，后代选择器中两个元素之间的间隔可以是无限的。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿爷爷是祖父的后代爸爸是祖父的后代我是祖父的后代儿子也是祖父的后代1后代选择器（3）语法格式祖先元素后代元素{

属性:属性值;

属性:属性值;………}祖先元素与后代元素之间是空格隔开（2）作用选择匹配的后代元素，并且匹配的后代元素被包含在匹配的祖先元素内1后代选择器（4）代码示例<html>

<head>

<title>后代选择器</title>

<styletype=“text/css”>

pspan{

color:blue;

text-decoration:underline;

}

</style>

</head>

<body>

<p>我是正常的文字</p>

<p><span>我是p标签span标签里的内容，是蓝色加下划线了吗？</span></p>

<p>

<span>

我是p标签第一个span标签里的内容，是蓝色加下划线了吗？

<span>

我是p标签第二个span标签里的内容，是蓝色加下划线了吗？

</span>

</span>

</p>

</body>

</html>

p标签是祖先span标签是后代2子元素选择器（1）定义只能选择作为某元素子元素的元素。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿爷爷是祖父的儿子爸爸是爷爷的儿子我是爸爸的儿子儿子也是我的儿子2子元素选择器父元素>子元素{

属性:属性值;

属性:属性值;………}（2）作用选择匹配的子元素，只有上下一级关系。（3）语法格式父元素与子元素之间是>隔开（4）代码示例2子元素选择器<html>

<head>

<title>子元素选择器</title>

<styletype="text/css">

ul>li{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<ul>

<li>新闻一

<ul>

<li>11月1号</li>

<li>11月2号</li>

</ul>

</li>

<li>新闻二

<ol>

<li>12月1日</li>

<li>12月2日</li>

</ol>

</li>

新闻三

</ul>

<ol>

<li>新闻1</li>

<li>新闻2</li>

</ol>

</body>

</html>与后代选择器的区别：最大的不同是元素间隔不同后代选择器是将该元素作为父元素，它所有的后代元素都是符合条件的，而子元素选择器只是相对于父元素来说的第一级子元素符合条件。

总计CSS基础

--关系选择器2郭春丽相邻兄弟选择器01相邻兄弟组选择器02目录1相邻兄弟选择器（1）定义选择紧接在另一元素后的元素，且二者有相同父元素。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿爸爸和叔叔是相邻兄弟关系，他们有共同的父亲1相邻兄弟选择器（3）语法格式子元素+子元素{

属性:属性值;

属性:属性值;………}子元素与子元素之间是+隔开（2）作用针对的是同级元素，且两个元素是相邻的，拥有相同的父元素。要分清谁是参照元素，谁是要选择的元素。1相邻兄弟选择器（4）代码示例<html>

<head>

<title>子元素选择器</title>

<styletype="text/css">

h1+p{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<h1>我是标题</h1>

<p>我和h1是兄弟，是红色，下划线，倾斜吗？</p>

<p>我跟h1不是兄弟</p>

</body>

</html>

h1+p等同于bodyh1+p从后往前：选择紧接<h1>元素的<p>元素，<h1>和<p>元素包含在<body>从前往后；选择<body>的后代元素<h1>的相邻元素<p>2相邻兄弟组选择器（1）定义选择紧接在另一元素后的一组元素，且二者有相同父元素。祖父爷爷爸爸我儿子叔叔大哥二爷堂伯大堂哥二堂哥堂妹女儿与大伯相邻的有爸爸、叔叔，他们都有共同的父亲大伯2相邻兄弟组选择器子元素~子元素{

属性:属性值;

属性:属性值;………}（2）作用针对的是同级元素，元素间可以不相邻，但拥有相同的父元素。要分清谁是参照元素，谁是要选择的元素。（3）语法格式子元素与子元素之间是~隔开（4）代码示例2相邻兄弟组选择器与相邻兄弟选择器的区别：选中的是相邻的所有兄弟<html>

<head>

<title>子元素选择器</title>

<styletype="text/css">

h1~p{

color:red;

text-decoration:underline;

font-style:oblique;

}

</style>

</head>

<body>

<h1>我是标题</h1>

<p>我和h1是兄弟，是红色，下划线，倾斜吗？</p>

<p>我跟h1不是兄弟</p>

</body>

</html>

选择器类型功能描述EF后代选择器选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内E>F子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素E+F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面E~F相邻兄弟

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论