17

是否可以得到父母的父母?

我试过& & { }了,但没有用。

我正在尝试根据其祖父母设置子元素的样式。

4

4 回答 4

21

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

在大多数情况下,您不能直接执行此操作(有关例外情况,请参见第二个示例)。

如果祖父母是一个元素

这需要一些重复,但确实允许祖父母不是最外层的包装器(因此可能有曾祖父母)。

较少的

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*/    
}

如果Grandparent 是一个类、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;
}
于 2013-06-25T15:16:44.457 回答
7

你不能用更少的选择器任意向上遍历 DOM。改用javascript。

in less 代表声明的&选择器上一级。已定义规则的快捷方式。与您所寻求的相反。

于 2013-06-24T23:47:04.797 回答
5

根据 LESS 的父选择器功能,可以通过在嵌套中放置项目来更改选择器顺序,从而访问项目的父项的父项。&

更少的代码:

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

CSS结果:

span {
  color: red;
}
h6 span {
  color: white;
}
div h6 span {
  color: blue;
}
于 2016-02-12T13:45:44.377 回答
2

您可以使用 mixin,然后您可以根据祖父母选择器的细节将变量传递给它。

例子:

ul {
    .color-links(@color) {
        li a { // any link inside a child li
            color: @color;
        }
    }
    &.red {
        .color-links(#ff0000);
    }
    &.green {
        .color-links(#00ff00);
    }
}
于 2013-06-25T00:04:25.517 回答