教程 > LESS 教程 > Less 特征 阅读：46

LESS 父选择器

在本章中，让我们了解父选择器是如何工作的。 可以使用 &(&(&) 运算符来引用父选择器。 嵌套规则的父选择器由 & 运算符表示，并在将修改类或伪类应用于现有选择器时使用。

下表显示了父选择器的类型

序号 类型 描述
1 多个 & & 将代表最近的选择器以及所有父选择器。
2 修改选择器顺序 更改选择器顺序时，在继承（父）选择器之前添加选择器非常有用。
3 组合排列 & 还可以在以逗号分隔的列表中生成所有可能的选择器排列。

示例

以下示例演示了在 LESS 文件中使用 mixin Guard

parent_selector.html

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>迹忆客(jiyik.com) - Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to 迹忆客</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

现在，创建 style.less 文件。

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

我们可以使用以下命令将 style.less 编译为 style.css

style.css

a {
  color: #5882FA;
}
a:hover {
  background-color: #A9F5F2;
}

按照以下步骤查看上述代码的工作原理

  • 将上述 html 代码保存在 parent_selector.html 文件中。
  • 在浏览器中打开此 HTML 文件，将显示以下输出。

Less 父选择器

父选择器运算符有很多用途，例如，当我们需要以非默认方式组合嵌套规则的选择器时。 & 的另一个典型用途是重复生成类名。

查看笔记

扫码一下
查看教程更方便