LESS - Parent Selectors

在本章中,让我们了解父选择器的工作原理.可以使用& (&符号)运算符引用父选择器.嵌套规则的父选择器由& 运算符表示,在将修改类或伪类应用于现有选择器时使用.

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

Sr.No.类型&描述
1多个&

& 将代表最近的选择器以及所有父选择器.

2更改选择器顺序

当选择器排序更改时,将选择器预先添加到继承的(父)选择器非常有用./p>

3 Combinatorial Explosion  

& 也可以在逗号分隔的列表中产生选择器的所有可能排列.

示例

以下示例演示了在LESS文件中使用父选择器 :

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</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 使用以下命令 :

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件;

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

在上面的示例中,& 指的是选择器 a .

输出

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

  • 将上述html代码保存在 parent_selector1.htm 文件中.

  • 打开此HTML文件在浏览器中,将显示以下输出.

Less Parent Selector

父选择器运算符有许多用途,例如,当您需要以不同于其他方式组合嵌套规则的选择器时默认. & 的另一个典型用法是重复生成类名.