从‘通道里藏像素’到高清图：拆解PixelShuffle论文里的核心思想与PyTorch实现细节
2026/6/10 5:56:31
一、什么是复合选择器？
复合选择器就是把多个基础选择器组合在一起，用来更精准地选中元素、控制样式。
常见的有这4种：
1. 后代选择器
2. 子元素选择器
3. 并集选择器
4. 交集选择器
二、四种复合选择器，逐个拆解
1. 后代选择器（空格隔开）
格式： 父 子
作用：选中父元素里面所有后代（儿子、孙子都算）
例子：
ul li { color: red; }含义：ul里面所有li标签变红
2. 子代选择器（大于号 >）
格式： 父 > 子
作用：只选直接子元素，孙子不算，不能跨代
例子：
ul > li { margin: 10px; }意思：只选 ul 亲生的 li，里面嵌套的 li 不生效
3.交集选择器（连写，无空格）
格式：标签.类名
作用：同时满足两个条件：既是这个标签，又有这个类
例子：
p.box { font-size: 16px; }含义：只选中 <p class="box"> 标签
4. 并集选择器（逗号 ,）
格式： 选择器1,选择器2,选择器3
作用：多个选择器共用一套样式，简化代码
例子：
h1,h2,h3 { color: green; }含义：h1、h2、h3全部设置为绿色
一句话速记
空格：所有后代，随便跨代
大于号>：只选亲儿子，不跨代
逗号,：一起设置样式
连写：同时满足标签+类名
三、实现代码如下：
<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>效果图如下: