上一节:

  Less 父选择器

  • 定义

    在本章中，让我们了解父选择器的工作方式。 可以使用（&）符号引用父选择器。 嵌套规则的父选择器由＆运算符表示，并在将修改类或伪类应用于现有选择器时使用。
    下表显示了父选择器的类型-
    序号 类型和说明
    1
    多个(&)
    ＆将代表最近的选择器以及所有父选择器。
    2
    更改选择器顺序
    当更改选择器顺序时，将选择器放在继承的（父）选择器之前很有用。
    3
    多个组合
    & 还可以产生列表中所有可能的选择器排列，并以逗号分隔。

  • 示例

    下面的示例演示了LESS文件中父选择器的用法-

    parent_selector1.html

      <!doctype html>
  <head>
      <meta charset="UTF-8" />
      <title>蝴蝶教程(jc2182.com)</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
  </head>
  <body>
      <h2>欢迎来到蝴蝶教程</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
  </body>
  </html>
    现在让我们创建一个与 CSS 非常相似的文件 style.less，唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这几个文件都应在 F 盘的文件夹 lesscode 内创建。

    style.less

    a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}
    使用以下命令将 style.less 文件编译为 style.css- 
    PS F:\lesscode> lessc style.less style.css
    当您运行上述命令时，它将自动创建 style.css 文件。 每当您更改LESS文件时，都需要在 cmd 中运行上述命令，然后 style.css 文件将得到更新。
    运行以上命令时，style.css 文件将具有以下代码-

    style.css

    a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}
    在上面的示例中，& 表示选择器 a。

  • 输出结果

    现在让我们执行以下步骤，看看上面的代码如何工作-
    将上面的 html 代码保存在 parent_selector1.html 文件中。
    在浏览器中打开此 HTML 文件，将显示以下输出。
    less
    如果不懂以上命令操作，请先阅读我们 Less 安装
上一节: