子代选择器（>）只匹配直接子元素，需确保目标元素是父元素的第一层子级；配合类名、属性或伪类可提升精准度，避免与后代选择器混淆。
遇到 CSS 无法选中特定子元素的情况，通常不是选择器“失效”，而是层级关系没理清、选择器写法不匹配，或 HTML 结构与预期不符。用对 子代选择器（>） 是解决这类问题最直接有效的方式之一——它只匹配**直接子元素**，不穿透嵌套，能避免误选、提升精准度。
确认结构是否真为“直接子级”
子代选择器 > 要求目标元素必须是父元素的**第一层子元素**，中间不能隔层。比如：
-
.container > p只会选中<div class="container"><p>✓</p></div>中的p - 如果写成
<div class="container"><section><p>✗</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section></div>，这个p就不会被选中
建议在浏览器开发者工具中右键检查元素，逐层展开看 DOM 层级，确认目标元素是否真的挂在你写的父选择器下。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
别把子代选择器和后代选择器搞混
常见误区：用空格（后代选择器）代替 >，结果选中了不该选的深层元素。
-
.list li→ 匹配所有后代li（包括嵌套多层的） -
.list > li→ 只匹配.list下的**直接子li**（如菜单一级项，排除下拉子菜单）
如果你只想控制第一级列表项样式，而不想影响二级弹出菜单，> 就是刚需。
配合类名或属性进一步缩小范围
单靠 > 有时还不够，尤其当多个同级元素类型相同时。可以组合使用：
-
.card > .title—— 只选.card下带.title类的直接子元素 -
nav > a[href^="/"]—— 只选nav下 href 以 "/" 开头的直接子链接 -
ul > li:first-child—— 第一个直接子li，常用于首项加图标或去边框
注意伪类和伪元素的书写顺序
子代选择器要放在最外层，伪类/伪元素写在最后。错误写法：.box > :first-child（可能意外命中非预期元素）；推荐更明确的写法：
-
.box > h2:first-child—— 确保只选第一个子h2 -
.item > span::before—— 给直接子span添加装饰性内容
避免用 :nth-of-type 或 :first-child 单独搭配 > 时忽略兄弟元素类型差异，必要时用 :nth-child(n of selector)（现代支持良好）。
基本上就这些。子代选择器本身不复杂，但容易忽略它的“严格层级”特性。理清 DOM 树、少依赖空格、多用浏览器实时验证，90% 的“选不中”问题都能快速定位解决。
