太香了！CSS选择器复合玩法+常用属性一网打尽
在 CSS 的学习和应用中，选择器是连接样式与 HTML 元素的桥梁，而复合选择器更是让样式控制精准度翻倍的关键。今天我将结合一个 HTML 案例，讲解后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器这四类常用复合选择器的用法。
讲解如下：
上面是原图，下面是运用了各种选择器之后的效果，下面分别为讲解。
1. 后代选择器
语法：父选择器 子选择器 { 样式 }（空格分隔）
<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>/* 后代选择器（可跨代） */ nav ul li a{color: red;}上面是我们的目录代码，下面是使用后代选择器修改颜色的代码，为什么子选择器有a呢，虽然a标签不是nav的直接子元素（中间隔了ul、li），但是只要在nav的后代链里，就会被匹配。
2. 子代选择器
语法：父选择器>子选择器 { 样式 }（大于号分隔）
<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>/* 子代选择器（不可跨代） */ article>h3{color: green;}在我们给出的案例中，这里有两个h3标签，但是我们希望只让<article>的<h3>变成绿色，而侧边栏<aside>里的<h3>不受影响，所以我们的父选择器就要填<article>，这样<article>下的<h3>文章标题</h3>会变绿，但<aside><h3>侧边栏</h3></aside>里的<h3>不会 。
3. 相邻兄弟选择器
注：比较难，容易混淆
语法：元素E+元素F { 样式 }（加号分隔）
<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>/* 相邻兄弟选择器 */ h3+p{color: orange;}这个选择器的比较重要的一个特点是：匹配紧跟在元素 E之后的第一个同级元素 F，且两者必须有共同父元素。这个选择器用起来比较容易混淆，所以这个选择器一般很少用。
4. 通用兄弟选择器
语法：元素E~元素F { 样式 }（波浪号分隔）
<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>/* 通用兄弟选择器 */ h1~p{font-size: 50px;}案例中，我们让h1之后的同级p标签字体变大，只要是同级元素，不管他们中间有没有隔其他元素，只要是同级的p标签的元素就会变大。
我们的选择器就讲到这里。
5.其他常用属性
a.文本属性
<p> ：段落标签，用来写正文文本，自带上下间距
<h1>~<h6> ：标题标签，h1最大，h6最小，自带加粗和间距
<span> ：行内文本容器，用来给局部文字单独设置样式（比如变色、加粗）
<a> ：超链接标签，用来跳转页面
<body> <p id="first">first测试文本: 靠左对齐，下划线，大写字母</p> <p id="second">second测试文本：居中对齐，删除线，小写字母</p> <p id="third">third测试文本： 靠右对齐，上划线，单词首字母大写</p> </body>b.图像属性
<img> ：图片标签，用来在页面插入图片
＜src >：图片路径（ img_src 文件夹就是用来放图片的）
<alt＞ ：图片加载失败时显示的替代文本
c.背景属性
background-color （背景色）
background-image （背景图）
background-size （背景图大小
background-position （背景图位置）
d.表格属性
border-collapse （边框合并）
text-align （单元格内容对齐）
padding （单元格内边距）
border-spacing （单元格间距）
e.表单属性
border （输入框边框）outline （聚焦外框）padding （内边距）
width/height （尺寸）
background-color （背景色）
一个关于表单和表格的小练习：
1.表格
width/height定大小、border设边框、border-collapse/collapse合并边框、background-color设背景色。
单元格：th/td单独设边框、text-align水平对齐、vertical-align垂直对齐
2.表单
可自定义边框线型（实线 / 虚线 / 双线）、颜色、宽度。
可改文字颜色、设置宽高、添加背景图片。