改变选择器顺序父选择器

2025 年 3 月 17 日 | 阅读 1 分钟

当选择器顺序改变时,将选择器添加到继承的(父)选择器中非常有用。& 操作符放在选择器后面可以实现此目的。

例如: 当你使用 Modernizer 时,你可能希望根据支持的功能指定不同的规则。


改变选择器顺序示例

让我们举一个例子来演示改变选择器顺序父选择器的用法。

创建一个名为 "simple.html" 的 HTML 文件,其中包含以下数据。

HTML 文件:simple.html

现在创建一个名为 "simple.less" 的文件。 它类似于 CSS 文件。 唯一的区别是它以 ".less" 扩展名保存。

LESS 文件:simple.less

将 "simple.html" 和 "simple.less" 两个文件放在 Node.js 的根文件夹中

现在,执行以下代码:lessc simple.less simple.css

Less Changing selector order parent selector1

这将编译 "simple.less" 文件。 将生成一个名为 "simple.css" 的 CSS 文件。

例如

Less Changing selector order parent selector2

生成的 CSS "simple.css" 具有以下代码

输出

Less Changing selector order parent selector3