感觉 > combinator的可维护性最高 按照visual tree往下排 不会因为写了简单的class name而互相干扰

比如下面这种，但实际当中还有嵌套更深的

但是有点担心浏览器匹配这些selector是不是要消耗更多时间 不至于严重影响性能吧？

div.infowindow-shop{
    >span.title{
        font-size: 18px;
        font-family: roboto;
        font-weight: bold;
    }
    >span.title:hover{
        font-size: 18px;
        font-family: roboto;
        cursor: pointer;
    }
    >span.hours{
        font-size: 16px;
        font-family: roboto;
    }
    >div.img-list{
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        >div.list-item{
            user-select: none;
            cursor: pointer;
            flex: 0 0 auto;
            display: flex;
            flex: 0 0 100px;
            flex-direction:column;
            overflow-x: hidden;
            >img.item-image{
                height: 100px;
                max-height: 100px;
                width: expression('this.width > 100 ? 100: true');
            }
            >span.item-price{
                color: red;
                font-family: roboto;
                font-weight: bold;
                font-size: 14px;
            }
            >span.item-des{
                color: black;
                font-family: roboto;
                font-weight: normal;
                font-size: 14px;
            }
        }
    }
}

--
FROM 110.23.10.*