我有一个用于文章和 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
在家里:
<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);}
}
§ion{
.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;}
}
}
