css Less [duplicate]中嵌套选择器后的“&”有什么作用

41zrol4v 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(145)

此问题已在此处有答案：

What is the meaning of an ampersand in Less selectors?（1个答案）
4天前关闭。
减

.list a{
    .landscape&{
        height: 100%;
    }
}

产出

.landscape.list a {
  height: 100%;
}

意思是“父母都是A型的。景观和。列表”
减

.list a{
    &.landscape{
        height: 100%;
    }
}

产出

.list a.landscape {
  height: 100%;
}

这意味着“所有具有类'landscape'且其父类具有。列表”
这就说得通了但是如果我从这些选择器中删除“a”标记，“&”只会改变的连接顺序。list和. landscape。
这有什么意义什么时候应该使用&.class，什么时候应该使用class.&？

css

来源：https://stackoverflow.com/questions/25625103/what-is-the-purpose-of-after-a-nested-selector-in-less

2条答案

按热度按时间

dwthyt8l1#

Less中的&表示父选择器。因此，无论你把&放在哪里，它都会用CSS中的parent选择器替换它，如果你在它前面有一个空格的话。
如果不是，即，在&之前没有空格，它将成为子对象，并将选择器附加到其父对象，就像您的情况一样。
参考文献：

Less CSS Secrets-of-the-Ampersand
父选择器

赞(0）回复(0）举报 2023-05-02

drnojrws2#

文章"LESS CSS: Secrets of the Ampersand"很好地描述了这种差异。我将重点介绍主要用途：

将类附加到现有选择器
基于父类更改状态
筛选嵌套选择器以仅匹配某些元素
选择重复元素时避免重复
简化组合爆炸

后者是我的最爱。我用它来处理一些疯狂的IE问题。看看这个

/**
 * Add a top border to paragraphs,
 * but remove that border when a preceding paragraph already has one.
 */
p  {
    border-top: 1px solid gray;
    & + & {
        border-top: 0;
    }
}

我认为如果您能理解&的这种用法的作用，那么所有其他用法都变得显而易见。

赞(0）回复(0）举报 2023-05-02

我来回答

css Less [duplicate]中嵌套选择器后的“&”有什么作用

2条答案

相关问题

热门标签

最新问答