“全部分类”DOM结构详解

如何用CSS处理导航中的所有分类

DOM结构分析（隶属于.tshop-pbsm-shop-nav-ch .skin-box-bd .all-cats下）

.all-cats-trigger(分类按钮)
    a.link(所有分类链接)
        span.title  (所有文字)
        i.popup-icon (下拉箭头样式)

.all-cats-popup —— 弹出菜单（一级）【此处的宽度将根据.all-cats-trigger的宽度计算，用CSS设置无效】
    .popup-inner（所有分类弹出层）
        ul.cats-tree （一级分类列表）
            li.fst-cat （一级分类项）
                h4.fst-cat-hd（一级分类名）
                    i.fst-cat-hd-icon（分类前导）
                    a.fst-cat-name（分类文字）
                .snd-pop（对应二级分类）
                    .sn-pop-inner（二级分类容器）
                        ul.fst-cat-bd（容器层）
                            li.snd-cat（二级分类项）
                                h4.snd-cat-hd（二级分类名）
                                    i.snd-cat-icon（分类前导）
                                    a.by-label（分类名）

 

注：在设置DOM的CSS样式时，尽量把层写得分明一点，这样可以把样式影响程序做到最小化。从而实现局部的修改。