less中&的使用

最新推荐文章于 2022-08-30 20:29:31 发布

白嫖leader

最新推荐文章于 2022-08-30 20:29:31 发布

阅读量790

点赞数

分类专栏：笔记文章标签： javascript css css3

本文链接：https://blog.csdn.net/ksjdbdh/article/details/121205941

版权

CSS 父选择符且选择器样式

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

82 篇文章 8 订阅

订阅专栏

用法：&符号有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;