Less 父选择器

17 Mar 2025 | 阅读 2 分钟

在 Less 中，父选择器由 &(ampersand) 运算符表示。嵌套规则的父选择器由 & 运算符表示，最常用于将修改类或伪类应用于现有选择器。

指定父选择器类型的列表

索引	类型	描述
1)	多个 &	& 用于表示最近的选择器以及所有父选择器。
2)	更改选择器顺序	它用于更改选择器顺序，因为将选择器添加到继承的（父）选择器对于更改选择器顺序很有用。
3)	组合爆炸	& 运算符还可以生成列表中所有可能的选择器排列。列表中的选择器用逗号分隔。

父选择器示例

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

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

HTML 文件：simple.html

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="simple.css" type="text/css" />
  <title>Parent Selector Example</title>
</head>
<body>
<h2>Courses available on JavaTpoint:</h2>
 <ul>
   <li><a>Less</a></li>
   <li><a>SASS</a></li>
   <li><a>CSS</a></li>
   <li><a>Java</a></li>
   <li><a>Oracle</a></li>
   <li><a>Hadoop</a></li>
 </ul>
</body>
</html>

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

LESS 文件：simple.less

a {
  color: blue;
}
a:hover {
  background-color: red;
}  

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

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

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

例如

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

a {
  color: blue;
}
a:hover {
  background-color: red;
} 

输出

下一主题Less 多个 & 父选择器

Less 父选择器

父选择器示例

联系信息

关注我们

教程

面试题

在线编译器

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 教程

1) 参数 Mixins

1) Less 合并逗号

3) 将规则集传递给 mixin

Less 运算

Less 注释

LESS 的特性

Less 循环

Less 语法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器