多个 & 父选择器

17 Mar 2025 | 阅读 2 分钟

在Less中，& 运算符用于重复引用父选择器，而无需使用其名称。因此，多个 & 父选择器指定在选择器中 & 运算符可以使用多次。

多个 & 示例

让我们举个例子来演示 **多个 &** 父选择器的用法。

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

HTML文件: simple.html

<!DOCTYPE html>
<html>
<head>
    <title>Multiple & Example</title>
 <link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
<h2>JavaTpoint: A solution of all technology.</h2>
<p class="select">It is possible to reference the parent selector by using &(ampersand) operator.</p>
<p class="select_class1">It is possible to reference the parent selector by using &(ampersand) operator</p>
</body>
</html>

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

LESS 文件：simple.less

.select + .select {
  color: pink;
}
.select .select {
  color: blue;
}
.select.select {
  color: red;
}
.select,
.select_class1 {
  color: green;
}

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

现在，执行以下代码：lessc simple.less simple.css

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

例如

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

.select + .select {
  color: pink;
}
.select .select {
  color: blue;
}
.select.select {
  color: red;
}
.select,
.select_class1 {
  color: green;
}

输出

下一个主题更改选择器顺序父选择器

← 上一个下一个 →

多个 & 父选择器

多个 & 示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Less 教程

Less 函数

Less 面试

多个 & 父选择器

多个 & 示例

相关帖子

Less 循环

Less 安装

Less 语法

LESS 的特性

Less 命令

Less 注释

3) 将规则集传递给 mixin

Less 教程

Less 合并

3) Less CEP 选择器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器