当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
我有一个用于文章和 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
我有一个用于文章和 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>
   …

具有类exit的每个元素都在里面有一个数字HTML5元素.使用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;}
}

但我必须指明它是文章还是部分!我有很多这样的课程,这有点烦人……

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

.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;}
    }
}
如果他们不会在退出类中共享任何常见样式,那么在尝试嵌套这两个规则时,我认为没有多大意义.

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

.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;}
    }
}
网友评论