LESS中&符号-CSDN博客

本文链接：https://blog.csdn.net/Imagirl1/article/details/103288230

用法：&符号有2中用法，其一：父选择符；其二：且的意思

其一：父选择符

.ant-menu{
  background: #fff; 
  border-bottom:0;

  .ant-menu-item{
      color: rgba(0,0,0,0.65);  
      padding-left:16px; 
      padding-right:16px;
        &:hover {
                color: #235FB8; border-bottom-color:transparent;
            }
  }

  .ant-menu-submenu &{
     border-color: #235FB8;
  }

}

转化为CSS效果：

.ant-menu {
  background: #fff;
  border-bottom: 0;
}
.ant-menu .ant-menu-item {
  color: rgba(0,0,0,0.65);
  padding-left: 16px;
  padding-right: 16px;
}
.ant-menu .ant-menu-item:hover {
  color: #235FB8;
  border-bottom-color: transparent;
}
.ant-menu-submenu .ant-menu {
  border-color: #235FB8;
}

&符号放在类后面

.ant-menu{
  background: #fff; 
  border-bottom:0;

  .ant-menu-item{
      color: rgba(0,0,0,0.65);  
      padding-left:16px; 
      padding-right:16px;
  }

  .ant-menu-submenu &{
     border-color: #235FB8;
  }

}

转为为CSS效果：

.ant-menu {
  background: #fff;
  border-bottom: 0;
}
.ant-menu .ant-menu-item {
  color: rgba(0,0,0,0.65);
  padding-left: 16px;
  padding-right: 16px;
}
.ant-menu-submenu .ant-menu {
  border-color: #235FB8;
}

其二：且

.ant-menu{
  background: #fff; 
  border-bottom:0;

  .ant-menu-item{
      color: rgba(0,0,0,0.65);  
      padding-left:16px; 
      padding-right:16px;
  }

  &.ant-menu-submenu{
     border-color: #235FB8;
  }

}

转化为CSS的效果： .ant-menu.ant-menu-submenu与.ant-menu .ant-menu-submenu不一样，前者是同级，后者是父子关系

.ant-menu {
  background: #fff;
  border-bottom: 0;
}
.ant-menu .ant-menu-item {
  color: rgba(0,0,0,0.65);
  padding-left: 16px;
  padding-right: 16px;
}
.ant-menu.ant-menu-submenu {
  border-color: #235FB8;
}