📌  相关文章
📜  LESS-父选择器

📅  最后修改于: 2020-10-22 07:12:16             🧑  作者: Mango

 

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

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

Sr.No. Types & Description
1 Multiple &

The & will represent the nearest selector and also all the parent selectors.
2 Changing Selector Order

Prepending a selector to the inherited (parent) selectors is useful when selector ordering is changed.
3 Combinatorial Explosion

The & can also produce all the possible permutation of selectors in a list separated by commas.

例

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


      Parent Selector
   

   
      
Welcome to TutorialsPoint

接下来，创建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文件，将显示以下输出。

较少的父选择器

当您需要以默认方式以外的其他方式组合嵌套规则的选择器时，“父选择器”运算符有很多用途。 ＆的另一个典型用法是重复生成类名。有关更多信息，请单击此处。