如何指定一个LESS CSS嵌套类中的HTML标记?(How to specify a html t

2019-09-22 20:48发布

我上的一类articlesection HTML5标签。

在主页:

<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>
   …

与类出口每个元件具有一个figure内HTML5元件。 用量少,我用这个代码做我想做的。

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;}
    }
}


文章来源: How to specify a html tag on a LESS CSS nested class?
标签: css less