开发手册 欢迎您!
软件开发者资料库

LESS - Parent Selectors

LESS的Parent Selectors - 从简单和简单的步骤开始,从简单和简单的步骤学习,包括概述,安装,嵌套规则,嵌套指令和冒泡,操作,转义,函数,命名空间和访问器,范围,注释,导入,变量, Extend,Mixins,Parametric Mixins,Mixins作为函数,将规则集传递给Mixins,导入指令,导入选项,Mixin Guards,CSS Guards,循环,合并,父选择器,其他函数,字符串函数,列表函数,数学函数,类型函数,颜色定义功能,颜色通道功能,颜色操作,颜色混合功能,命令行使用,在浏览器中使用较少,浏览器支持,插件,编程使用,在线编译器,GUI,编辑器和插件,第三方编译器,框架。

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

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

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

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

2更改选择器顺序

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

3 Combinatorial Explosion  

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

示例

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

               Parent Selector            

Welcome to TutorialsPoint

      
             
  • SASS
  •          
  • LESS
  •       
   

接下来,创建 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

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