手把手调试UDS：用CANoe/CANalyzer实战$22、$2E、$27和$31服务
2026/5/6 6:33:16
一、复合选择器
复合选择器是把两个或多个基础选择器组合在一起，用来更精准的选中标签的CSS选择器。
1.选择器类型
| 选择器类型 | 用法 |
| 后代选择器 | 通过空格分隔两个选择器，匹配第一个选择器里所有属于它后代的第二个选择器元素 |
| 子代选择器 | 使用“>”分隔两个选择器，仅匹配第一个选择器的直接元素 |
| 并集选择器 | 使用“，”分隔多个选择器，同时给这些选择器设置相同的样式 |
| 交集选择器 | 两个选择器直接连写（无分隔号），匹配同时满足两个选择器条件的元素 |
注意：复合选择器的优先级，权重越高，优先级越高。
图一
下面让我们还原出图一网页格式的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合选择器</title> </head> <body> <header> <h1 align="center">广东云浮中医药职业学院</h1> <p align="center">欢迎来到: <ins>计算机学院</ins></p > <hr> <nav> <ul type="none"> <li><a href=" ">首页</a ></li> <li><a href="#">关于我们</a ></li> <li><a href="#">学生风采</a ></li> <li><a href="#">联系方式</a ></li> </ul> </nav> </header> <hr> <main> <section> <h2>最新文章</h2> <article> <h3>文章标题</h3> <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p > <br><br><br> <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a ></p > </article> <br> <aside> <h3>侧边栏</h3> <p>侧边栏内容，如快速链接、广告等。</p > <table border="1"> <tr> <th>专业</th> <th>链接</th> </tr> <tr> <td>计算机应用技术</td> <td><a href="专业A详情页.html">专业A详情</a ></td> </tr> <tr> <td>数字媒体技术</td> <td><a href="专业B详情页.html">专业B详情</a ></td> </tr> </table> </aside> </section> <section> <h4>联系我们</h4> <form> 姓名: <input type="text" id="name" name="name"><br> 邮箱: <input type="email" id="email" name="email"><br> <input type="submit" value="提交"> </form> </section> </main> <hr> <footer> <p>版权所有 © 2024 广东云浮中医药职业学院计算机学院</p > </footer> </body>还原代码之后我们可以改变表单样式，我们可以通过复合选择器来改变，通过图二可以知道我们分别通过什么选择器改变样式。
图二
下面是四种选择器的相关代码
<style> /* 后代选择器 */ nav ul li a{color: red;} /* 子代选择器 */ article>h3{color: green;} /* 相邻兄弟选择器 */ h3+p{color: orange;} /* 通用兄弟选择器 */ h1~p{font-size: 50px;} </style>二、文本样式
CSS文本样式用来美化、调整网页里所有文字的外观、对齐方式、行间距、字间距、颜色等，让文字更好看、更易读。
<!DOCTYPE html> <html lang="en"> <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: green; border-style: solid; border-collapse: collapse; background-color:yellow; color: black; } th, td{ border: 2px red solid; text-align:right; vertical-align:bottom; } th{ background-color:gray; color: blue; } .text1{ border:3px double orange; color:#03c; } .text2{ border:1px dashed blue; 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>根据以上代码可以生成图三
图三
以上就是我们今天所学的内容，如果有关优先级的问题可以去看一下上一章的内容哦~