版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 潼南县上和镇招聘社区网格员备考题库附答案详解
- 2026年萍乡卫生职业学院单招职业适应性考试题库及参考答案详解一套
- 2026年郑州食品工程职业学院单招职业适应性考试题库及参考答案详解1套
- 2026年重庆城市科技学院单招职业适应性考试题库及参考答案详解1套
- 2026年珠海城市职业技术学院单招职业倾向性测试题库及参考答案详解
- 2026年萍乡卫生职业学院单招职业适应性考试题库参考答案详解
- 2026年铜仁职业技术学院单招职业倾向性测试题库及参考答案详解一套
- 2026年青海卫生职业技术学院单招职业适应性测试题库带答案详解
- 象州县水晶乡招聘社区网格员备考题库附答案详解
- 第1课 科技与文化-决定建筑形式教学设计高中美术人教版2019选择性必修4 设计-人教版2019
- 2026年高校教师招聘面试题参考
- (2025年)(新版)无人机理论知识技能考试题库含答案详解【b卷】
- 五皇山缆车施工方案
- GB/T 4772.1-2025旋转电机尺寸和输出功率等级第1部分：机座号56～400和凸缘号55～1 080
- 休克病人抢救配合课件
- 医院固定资产管理培训课件
- GB/T 22080-2025网络安全技术信息安全管理体系要求
- 培训机构学员个人信息保护管理制度
- 2025届辽宁省阜新实验中学七年级数学第二学期期末统考试题含解析
- 储能站施工组织设计施工技术方案(技术标)
- 汕尾市集中式饮用水水源地突发环境事件应急预案
评论
0/150
提交评论