如何在 LESS CSS 嵌套类上指定 html 标签？答案

【问题标题】：How to specify a html tag on a LESS CSS nested class?如何在 LESS CSS 嵌套类上指定 html 标签？
【发布时间】：2012-09-15 11:32:50
【问题描述】：

我有一个用于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 类的每个元素内部都有一个figure 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;}
}

但我必须指定它是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;}
    }
}

【问题讨论】：

CSS 不支持嵌套。如果这样做会非常方便，但 W3C 并不是要让人们的生活变得轻松。
是的，但我使用 LESS CSS，它接受这种嵌套……也许不是我搜索的内容，但它有效。 lesscss.org/#-nested-rules

标签： css less

【解决方案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;}
    }
}

【讨论】：

哈哈，认真的吗？我只需要逆转？好的……它有效。谢谢！我使用这个嵌套类来避免类的重复。更改期货类名称更有效！
很好，不知道这是可能的。
呵呵，这是我们小讨论的一些不错的用例，stackoverflow.com/questions/11537260/… ;)
@Christoph: :) 需要明确的是，&article 和 &section 在这里不起作用，不是因为 LESS 不允许，而是因为它在 CSS 中无法按预期工作.
如果你想为类 .exitarticle 的元素制定规则，它可以工作：-D

【解决方案2】：

我也有同样的疑问并来到这里，但发现了一个有趣的怪癖可能会有所帮助。我更喜欢根据我在使用 LESS 时编写的 HTML 来嵌套样式。

例如，如果我的 HTML 如下所示：

<div id="content">
  .....
  <div class="form-container">
    <input type="text" class="form-control"....>
    <textarea class="form-control"></textarea>
    ......
  </diV
</div>

我的样式表如下所示：

#content{
  .form-container{
     color: red;
     .form-control{
       border: 1px solid black;
     }
  }
}

现在，我想对输入元素和文本区域进行不同的编码。当我查看上面的答案时，我尝试了这个：

#content{
  .form-container{
     color: red;
     .form-control{
       border: 1px solid black;
       input&{
         height: 40px;
       }
       textarea&{
         height: 100px;
       }
     }
  }
}

input& 部分（和textarea&）被编译为：

input#content .form-container .form-control {
  height: 20px;
}

所以这是一个需要牢记的警告。要解决此问题，只需从嵌套部分中提取 .form-control 部分即可。

【讨论】：