当前位置：首页 > news >正文

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

news 2026/5/9 23:20:18

对于关系选择器怎么用到网页上，我们应该先要了解它的一些用法还有其作用，除了关系选择器还有关系选择复合器的应用，这些我们都应该一一来了解一下~

首先我们来讲讲关系选择器，对于关系选择器的用法，我们要先了解几个选择器，如后代选择器（可跨代），最实用！除了这个还有不跨代的使用方式，如子代选择器，特别注意：子代选择器不可跨代，跨代无效；还有相邻兄弟元素：某元素后面第一个同级xxx元素，相邻兄弟选择器错误使用示范：关系紊乱不唯一，不要这么用，关系紊乱导致所有<li>元素的相邻兄弟都被选中，相邻兄弟选择器是用于选中某元素的相邻兄弟；最后就是通用兄弟元素：某元素后面所有同级xxx元素，通用兄弟选择器是用于选中某元素的所有相邻兄弟。我们了解完这些之后，就可以做如下图网页了：

具体代码如下图所示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关系选择器</title> <style> /* 【实验1】 */ /* 后代选择器（可跨代），最实用！ */ /* 1.不跨代使用方式 */ /* ul li h6{ color: red; } */ /* 2.跨代使用方式 */ /* ul #third { color: green; } */ /* 【实验2】 */ /* 子代选择器 */ /* ul>h6 { color: green; } */ /* ul > h4{color: blue;} */ /* ul>li>ul>li>h6{color: orange;} */ /* 特别注意：子代选择器不可跨代，跨代无效 */ /* ul > h6{color: red;} */ /* 【实验3】 */ /* 相邻兄弟元素：某元素后面第一个同级xxx元素 */ /* 相邻兄弟选择器：用于选中某元素的相邻兄弟） */ /* h4+li{ color: orange; } */ /* 相邻兄弟选择器错误使用示范：关系紊乱不唯一，不要这么用 */ /* 关系紊乱导致所有<li>元素的相邻兄弟都被选中 */ /* li+li{ color: red; } */ /* 【实验4】 */ /* 通用兄弟元素：某元素后面所有同级xxx元素 */ /* 通用兄弟选择器：用于选中某元素的所有相邻兄弟） */ h4~li{ color: orange; } </style> </head> <body> <ul> <h4 class="header">《书剑恩仇录》</h4> <li>第一章 <ul> <li> <h6 id="first">第一节</h6> </li> <li> <h6 id="second">第二节</h6> </li> <li> <h6 id="third">第二节</h6> </li> </ul> </li> <li>第二章 </li> <li>第三章 </li> <p>ssss</p> <p>ssss</p> <p>ssss</p> </ul> </body> </html>

了解完关系选择器之后，我们现在就来了解一下关系选择器的复合，对于关系选择器复合的应用，我们应该先来了解一下它的属性，它的属性有五种，这五种属性分别是文本属性，图像属性，背景属性，表格属性和表单属性。

首先是文本属性，其网页图片和代码如下图所示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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 id="first">first测试文本: 靠左对齐，下划线，大写字母</p> <p id="second">second测试文本：居中对齐，删除线，小写字母</p> <p id="third">third测试文本： 靠右对齐，上划线，单词首字母大写</p> </body> </html>

其次是图像属性，图像属性中可以加入自己喜欢的图片。

然后是背景属性，其中块元素可以设置宽高属性，而行内元素不能设置宽高属性。具体网页图片和代码如下图所示：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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 src="tupian/观望.jpg" id="photo1"> </header> <nav></nav> <main> <article> <h1>一级标题12</h1> </article> <br><br> <aside> <span>6</span> </aside> </main> <br><br> <footer> </footer> </body> </html>

最后就是表格属性和表单属性，在设置表格属性中，我们要用到border属性值和color属性值，这些可以用来设置其表格的长宽高和自己喜欢的背景颜色，然后在这基础之上来写表单。具体网页图片和代码如下图所示：

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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 border="1"> <tr> <th scope="col" id="th0">无</th> <th scope="col">列标题1</th> <th scope="col">列标题2</th> </tr> <tr> <th scope="col">行标题1</th> <td id="td5">普通单元格1</td> <td>普通单元格2</td> </tr> <tr> <th scope="col">行标题2</th> <td>普通单元格3</td> <td>普通单元格4</td> </tr> </table> <br><br><hr><br><br> <p> <input type="text" name="normal"> 默认样式的文本域 </p> <p> <input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1"> 改变了边框颜色和文字颜色的文本域 </p> <p> <input name="password" type="password" class="text2"> 增加了背景图片的文本域 </p> <p> <input name="button" type="submit" value="提交" /> 默认风格的提交按钮 </p> <p> <input name="button00" type="submit" class="btn00" id="button0" value="登录"> 这是一个加大的虚线边框，填充粉色，透明度为0.3的按钮 </p> <p> <input name="button01" type="submit" class="btn01" id="button1" value="注册"> 鼠标悬停变手指的无边框按钮 </p> </body> </html>