关系选择器和关系选择器的复合，简单实用快来看一看吖~

对于关系选择器怎么用到网页上我们应该先要了解它的一些用法还有其作用除了关系选择器还有关系选择复合器的应用这些我们都应该一一来了解一下~首先我们来讲讲关系选择器对于关系选择器的用法我们要先了解几个选择器如后代选择器可跨代最实用除了这个还有不跨代的使用方式如子代选择器特别注意子代选择器不可跨代跨代无效还有相邻兄弟元素某元素后面第一个同级xxx元素相邻兄弟选择器错误使用示范关系紊乱不唯一不要这么用关系紊乱导致所有li元素的相邻兄弟都被选中相邻兄弟选择器是用于选中某元素的相邻兄弟最后就是通用兄弟元素某元素后面所有同级xxx元素 通用兄弟选择器是用于选中某元素的所有相邻兄弟。我们了解完这些之后就可以做如下图网页了具体代码如下图所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title关系选择器/title style /* 【实验1】 */ /* 后代选择器可跨代最实用 */ /* 1.不跨代使用方式 */ /* ul li h6{ color: red; } */ /* 2.跨代使用方式 */ /* ul #third { color: green; } */ /* 【实验2】 */ /* 子代选择器 */ /* ulh6 { color: green; } */ /* ul h4{color: blue;} */ /* ulliullih6{color: orange;} */ /* 特别注意子代选择器不可跨代跨代无效 */ /* ul h6{color: red;} */ /* 【实验3】 */ /* 相邻兄弟元素某元素后面第一个同级xxx元素 */ /* 相邻兄弟选择器用于选中某元素的相邻兄弟 */ /* h4li{ color: orange; } */ /* 相邻兄弟选择器错误使用示范关系紊乱不唯一不要这么用 */ /* 关系紊乱导致所有li元素的相邻兄弟都被选中 */ /* lili{ color: red; } */ /* 【实验4】 */ /* 通用兄弟元素某元素后面所有同级xxx元素 */ /* 通用兄弟选择器用于选中某元素的所有相邻兄弟 */ h4~li{ color: orange; } /style /head body ul h4 classheader《书剑恩仇录》/h4 li第一章 ul li h6 idfirst第一节/h6 /li li h6 idsecond第二节/h6 /li li h6 idthird第二节/h6 /li /ul /li li第二章 /li li第三章 /li pssss/p pssss/p pssss/p /ul /body /html了解完关系选择器之后我们现在就来了解一下关系选择器的复合 对于关系选择器复合的应用我们应该先来了解一下它的属性它的属性有五种这五种属性分别是文本属性图像属性背景属性 表格属性和表单属性。首先是文本属性其网页图片和代码如下图所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title文本属性/title style #first { text-align: left; /*文本对齐*/ text-decoration: underline; /*文本装饰*/ text-transform:uppercase; /*文本大小写*/ text-indent: 20px; /*首行缩进*/ } #second{ text-align: center; text-decoration: line-through; text-transform:lowercase; width: 500px; /*块元素宽度*/ height: 25px; /*块元素高度*/ background-color:yellow; /*块元素背景色*/ color: red; /*块元素文本颜色*/ } #third{ text-align: right; text-decoration: overline; text-transform:capitalize; } /style /head body p idfirstfirst测试文本: 靠左对齐下划线大写字母/p p idsecondsecond测试文本居中对齐删除线小写字母/p p idthirdthird测试文本 靠右对齐上划线单词首字母大写/p /body /html其次是图像属性图像属性中可以加入自己喜欢的图片。然后是背景属性其中块元素可以设置宽高属性而行内元素不能设置宽高属性。具体网页图片和代码如下图所示!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title背景属性/title style /* 块元素可以设置宽高属性而行内元素不能设置宽高属性 */ nav{width: 30px;height: 30px; background-color: orange;} aside{width: 40px;height: 40px; background-color: rgb(172, 162, 239);} h1{width: 150px;height: 40px; background-color: rgb(153, 158, 219);} aside span{width: 150px;height: 40px; background-color: green;} header{ width: 100px; height: 100px; background-color: rgb(156, 232, 244); } #photo1{ /*当前元素宽高若用百分数取值比如25% 则是相对于父元素而言*/ width: 100px; height: 100px; border-color: rgb(125, 214, 238); /*边框颜色红色*/ border-style: dashed; /*边框线型虚线*/ border-width: 20px; /*边框宽度*/ opacity: 0.5; /*图像不透明度取值范围0~1*/ } footer{ /*设置块元素的宽高 */ width: 50px; height: 50px; /*设置块元素的填充色 */ background-color: rgb(129, 212, 236); /*填充图片设置图片背景的存储路径 上下左右居中 */ background-image:url(./img_src/photo1.jpg); /*设置图片背景在块元素中是否平铺 no-repeat 不平铺 repeat上下左右平铺 repeat-x左右平铺 repeat-y上下平铺*/ background-repeat: no-repeat; /*设置图片背景的尺寸或相对于块元素的大小 上下左右居中 */ background-size: 50% 25%; /*设置图片背景在块元素的位置 上下左右居中 */ background-position: center top; } /style /head body header img srctupian/观望.jpg idphoto1 /header nav/nav main article h1一级标题12/h1 /article brbr aside span6/span /aside /main brbr footer /footer /body /html最后就是表格属性和表单属性在设置表格属性中我们要用到border属性值和color属性值这些可以用来设置其表格的长宽高和自己喜欢的背景颜色然后在这基础之上来写表单。具体网页图片和代码如下图所示!DOCTYPE html html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表单表格属性练习/title style table{ width: 400px; height: 200px; border-width: 2px; /*表格外框厚度*/ border-color: red; /*表格外框颜色*/ border-style: solid; /*表格外框线型*/ /*border: 2px red solid; */ /*支持三个属性合并写*/ border-collapse: collapse; /*边框线折叠*/ background-color:yellow; /*整张表格背景色*/ color: black; /*整张表格文本颜色*/ } th, td{ border: 2px red solid; text-align:right; /*单元格文本水平对齐 left,right,center*/ vertical-align:bottom; /*单元格文本垂直对齐 top,bottom,center*/ } th{ background-color:gray; /*单元格背景色*/ color: blue; /*单元格文本颜色*/ } .text1{ border:3px double orange; /*3px双线橙色边框*/ color:#03c; /*文字颜色为蓝色*/ } .text2{ border:1px dashed blue; /*1px实线蓝色边框*/ width: 400px; height:20px; background:white url(./img_src/photo1.jpg) repeat; /*背景图像重复*/ } .btn00{ border:4px dashed red; background-color: pink; opacity: 0.3; } .btn01 {width:107px;height:37px; border:none; /*无边框背景图像本身就是边框风格的图像*/ cursor:pointer; /*鼠标样式为手型*/ font-size:14px; font-weight:bold; /*字体加粗*/ color:black; /*文字颜色为白色*/ } /style /head body table border1 tr th scopecol idth0无/th th scopecol列标题1/th th scopecol列标题2/th /tr tr th scopecol行标题1/th td idtd5普通单元格1/td td普通单元格2/td /tr tr th scopecol行标题2/th td普通单元格3/td td普通单元格4/td /tr /table brbrhrbrbr p input typetext namenormal 默认样式的文本域 /p p input namechbd typetext value输入的文字显示为蓝色 classtext1 改变了边框颜色和文字颜色的文本域 /p p input namepassword typepassword classtext2 增加了背景图片的文本域 /p p input namebutton typesubmit value提交 / 默认风格的提交按钮 /p p input namebutton00 typesubmit classbtn00 idbutton0 value登录 这是一个加大的虚线边框填充粉色透明度为0.3的按钮 /p p input namebutton01 typesubmit classbtn01 idbutton1 value注册 鼠标悬停变手指的无边框按钮 /p /body /html了解完以上五种属性之后就可以制作自己喜欢的网页了这就是我们今天要讲的关系选择器的相关内容啦谢谢大家的观看