less-css - 有可能得到父母的父母吗？

Question

有可能得到父母的父母吗？

我试过& & { }但是没用.

我正在尝试根据它的祖父母来设计一个子元素.

Answer 1

取决于代码结构,可能需要重复代码

在大多数情况下,您无法直接执行此操作(请参阅第二个示例以了解异常).

如果祖父母是一个元素

这需要一些重复,但允许祖父母不是最外面的包装(所以可能有一个伟大的祖父母).

减

grandparent {  
  /* grandparent styles */
  parent {
    /* parent styles */
    child {
      /* child styles */
    }
  }
  &.specialGrandpa {
    child {
      /* child styles with special Grandpa */
    }
  }
  &.specialGrandma {
    child {
      /* child styles with special Grandma*/
    }
  }
}

CSS输出

grandparent {
  /* grandparent styles */    
}
grandparent parent {
  /* parent styles */    
}
grandparent parent child {
  /* child styles */    
}
grandparent.specialGrandpa child {
  /* child styles with special Grandpa */    
}
grandparent.specialGrandma child {
  /* child styles with special Grandma*/    
}

如果祖父母是一个类,ID等,并且是最外层的包装器

这里不涉及重复,但你great grandparent不能混合使用.此外,这仅适用于LESS 1.3.1+版本(早期版本错误地添加空格):

减

.grandparent {  
  /* grandparent styles */
  .parent {
    /* parent styles */
    .child {
      /* child styles */
      .specialGrandparent& {
          /* child styles with special grandparent*/
      }
    }
  }
}

CSS输出

.grandparent {
  /* grandparent styles */    
}
.grandparent .parent {
  /* parent styles */   
}
.grandparent .parent .child {
  /* child styles */    
}
.specialGrandparent.grandparent .parent .child {
  /* child styles with special grandparent*/   
}

此代码通过附加到祖父母选择器的"前"来工作,这就是祖父母必须是类,ID或其他选择器本身的原因.

附录

基于评论关于在span空的时候有红色背景的愿望.这不会将背景放在父级上,而是使用子级"伪造"它.

span:empty:after {
    content: '';
    position: absolute;
    top: -1px;
    right: -10px;
    left: -1px;
    bottom: -10px;
    display: block;
    background-color: red;
    z-index: -1;
}

Answer 2

您不能使用较少的选择器任意遍历DOM.请改用javascript.

将&在更短的代表宣布选择一个级别.已定义规则的快捷方式.与你所谓的寻求相反.

Answer 3

据LESS的父母选择功能，它可能改变选择顺序通过将& 后的项目在你的窝，从而获取该项目的父亲的父亲。

更少的代码：

span {
  color:red;
  h6 & {
    color:white;
    div & {
      color:blue;
    }
  }
}

CSS结果：

span {
  color: red;
}
h6 span {
  color: white;
}
div h6 span {
  color: blue;
}