如何在LESS CSS嵌套类上指定html标签? [英] How to specify a html tag on a LESS CSS nested class?

问题描述

我在article和section HTML5标签上使用了一个类.

I have a class used on an article and a section HTML5 tag.

在家里:

<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 的元素内部都有一个figure HTML5元素.借助Less，我将使用此代码执行我想要的操作.

Each elements with the class exit have a figure HTML5 element inside. With Less, I use this code to do what I want.

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！我有很多这样的课程，这有点烦人……

But I have to specify if it's an article or a section! I have a lot of classes like that and it's a little annoying…

有解决方案来做这样的事情吗?太酷了……

Is there a solution to do something like this? It will be very cool…

.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类中不共享任何通用样式，则在嵌套这两个规则方面我没有多大意义.

I kinda don't see much of a point in trying to nest these two rules if they won't share any common styles within the exit class.

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

That said, if you still want to nest them, remember that in selectors, element names always precede other simple selectors. Try placing the & after the element name and see if it works:

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

这篇关于如何在LESS CSS嵌套类上指定html标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！