商品详情页CSS选择器易失效因DOM嵌套深、动态插入多、语义化弱；应优先用[data-spec]等属性选择器，避免:nth-child误用，hover需挂载容器而非子元素，选择器宜简短稳定。
为什么商品详情页的CSS选择器容易失效
因为商品详情页DOM结构通常嵌套深、动态插入多、语义化弱。比如轮播图容器里套着.swiper，再包一层.gallery，最后是.product-images——三个类名堆叠，但你只写了.product-images img，结果发现图片样式没生效。根本原因不是写错了，而是浏览器匹配时优先走了更具体的规则（比如某个JS注入的内联样式或更高特异性的.swiper-slide img）。这时候光看HTML结构不够，得用开发者工具检查“Computed”面板里最终生效的来源。
.spec-item 和 [data-spec] 该选哪个
在规格选择区域，常见两种写法：.spec-item 是类选择器，[data-spec] 是属性选择器。实际项目中建议优先用后者，尤其当规格项由后端模板动态渲染、class名不统一时。[data-spec] 更稳定，不会因UI重构改掉类名而断链；但要注意兼容性——IE8+才支持属性选择器，如果还要兼容IE8，就得 fallback 到类选择器。
- 用
[data-spec="color"]精准定位颜色规格，比.spec-item.color更可靠 - 避免写
[data-spec] > .label这种带子选择器的组合，它在部分老版微信内置浏览器里有匹配异常 - 如果用 Vue/React 渲染，
data-属性还能被框架直接读取，实现样式与逻辑联动
:nth-child(2) 在商品参数表里为什么总选错
商品参数表常用 dl + dt/dd 结构，想给第二个参数加粗，写 dt:nth-child(2) 却没反应——因为 dt 和 dd 是并列兄弟，dt:nth-child(2) 实际找的是“父元素下第二个子元素，且这个子元素是 dt”。如果第一个子是 dt，第二个是 dd，那它就匹配不到。
- 正确做法是用
dt:nth-of-type(2)：只统计dt类型的兄弟，忽略dd - 或者直接给关键参数加 class，比如
<dt class="param-key">品牌</dt>，再写.param-key——简单、可读、不依赖结构顺序 - 别用
:nth-child(odd)给参数行隔行变色，dt和dd交错出现会让颜色错位
图片放大镜区域的 .zoom-img 为什么 hover 不触发
商品主图常配放大镜效果，hover 触发区域是外层容器（比如 .product-main），但你把 :hover 写在了 .zoom-img 上，结果悬停图片本身才生效，用户根本摸不到那个小区域。这是典型的“事件目标错位”。
立即学习“前端免费学习笔记（深入）”；
- 必须把伪类挂到包裹容器上：
.product-main:hover .zoom-img，而不是.zoom-img:hover - 如果容器里还有按钮、文字等其他元素，加
pointer-events: none到它们身上，避免遮挡 hover 区域 - 移动端慎用
:hover，iOS Safari 对 touch 设备的 hover 支持不稳定，建议用 JS 监听touchstart做降级
商品详情页的选择器不是越长越精准，而是越贴近真实 DOM 节点生命周期越稳。一个被 JS 动态插入的 .price 元素，如果靠 #product-detail .info > .price 定位，一旦中间某层 class 名被重构或删掉，整条链就断了。真正健壮的做法，是用最少层级、最不可变的锚点——比如直接基于 data-role="price" 或紧贴语义化标签如 span[itemprop="price"]。
