CSS选择器依赖HTML层级结构，合理结构提升样式准确性和代码可维护性；2. 后代选择器、子选择器及伪类均受DOM嵌套影响，结构错误将导致样式失效；3. 语义化标签与简洁选择器结合，如header .logo，增强可读性与团队协作效率。
CSS选择器与HTML结构之间存在紧密的层级依赖关系，这种关系直接影响样式的应用效果和代码的可维护性。合理的HTML结构能提升CSS选择器的准确性与效率，同时增强整体代码的可读性和扩展性。
层级依赖：选择器基于DOM结构匹配元素
CSS选择器通过HTML文档对象模型（DOM）的层级关系来定位目标元素。这意味着选择器的有效性直接依赖于HTML的嵌套结构。
- 后代选择器如 article p 会选中所有在 article 内部的段落，若HTML中没有正确嵌套，则样式不会生效
- 子选择器 ul > li 只作用于直接子元素，结构变化会导致样式丢失
- 伪类如 依赖元素在父节点中的位置，结构调整可能打破预期样式
可读性优化：语义化结构配合简洁选择器
清晰的HTML语义和简明的选择器命名能显著提升团队协作效率和后期维护速度。
- 使用语义标签（header、nav、section）让选择器更具表达力，例如 header .logo 比 .main div ul li a:hover，这类写法对结构过于敏感，重构时容易失效
- 采用BEM等命名规范，用类名代替层级关系，提高组件独立性，降低耦合度
性能影响：过度依赖层级增加渲染开销
浏览器从右到左解析CSS选择器，深层或复杂的选择器会增加匹配成本。
立即学习“前端免费学习笔记（深入）”；
- 选择器 #sidebar .menu li a 需逐层回溯验证，不如直接使用类名
