如何在LESS CSS嵌套类中指定html标记？

Question

我有一个用于article和sectionHTML5标记的类.

在家里:

<article class="exit">
    <a href="exit.php">
        <figure class="box">
            <img src="assets/img/projects/exit-m.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
    </a>
</article>

在项目页面上:

<section class="page project exit">
    <div class="corner nw intro">
        <figure class="box">
            <img src="assets/img/projects/exit.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
   </div>
   …

具有类exit的每个元素都包含一个figureHTML5元素.使用Less,我使用此代码来执行我想要的操作.

article.exit{width:260px; height:200px; top:315px; left:505px;
    figure{background-color:@exit-bg;}
    .box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section.exit{
    .box:hover{.perspective-box(nw, 10, @exit-shadow);}
    .intro figcaption:hover{background:@exit-hover;}
}

但我必须指明它是一个article还是一个section!我有很多这样的课程,这有点烦人......

做这样的事情是否有解决方案？会很酷......

.exit{
    &article{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    &section{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}

Answer 1

如果他们不会在exit课堂上分享任何共同的风格,我有点想要嵌套这两个规则.

也就是说,如果你仍然希望嵌套它们,请记住在选择器中,元素名称总是位于其他简单选择器之前.尝试放置&元素名称后面,看看它是否有效:

.exit{
    article&{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    section&{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}