更少的css——是否有可能获得父级'；谁的父母？

有可能得到父母的父母吗

我尝试了

&&{}

，但没有成功

---

我正在尝试根据子元素的祖父母来设计它的样式。

您不能用较少的选择器随意遍历DOM。改用javascript

---

less中的

&

表示声明的选择器向上一级。已定义规则的快捷方式。与您声称的搜索相反。

您可以使用mixin，然后可以根据祖父母选择器的具体情况向其传递变量

例如：

ul {
    .color-links(@color) {
        li a { // any link inside a child li
            color: @color;
        }
    }
    &.red {
        .color-links(#ff0000);
    }
    &.green {
        .color-links(#00ff00);
    }
}

取决于代码结构，可能需要一些代码重复 在大多数情况下，您无法直接执行此操作（请参见第二个例外示例）

如果祖父母是一个要素

这需要一些重复，但允许祖父母不是最外层的包装（因此可能有一个曾祖父母）

更少

祖父母{
/*祖父母风格*/
母公司{
/*父样式*/
孩子{
/*子样式*/
}
}
&特朗巴先生{
孩子{
/*特别爷爷的孩子风格*/
}
}
&特朗玛先生{
孩子{
/*有特殊祖母的儿童风格*/
}
}
}

CSS输出

祖父母{
/*祖父母风格*/
}
祖父母{
/*父样式*/
}
祖父母子女{
/*子样式*/
}
祖父母，特别是我的孩子{
/*带特殊外公的儿童款式*/
}
祖父母，特别是我的孩子{
/*带特殊外婆的儿童风格*/
}

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

这里不涉及重复，但你不能有一个

曾祖父母

。此外，这仅适用于低于1.3.1+的版本（早期版本错误地添加了空格）：

更少

祖父母{
/*祖父母风格*/
.家长{
/*父样式*/
.孩子{
/*子样式*/
.specialGrandparent&{
/*有特殊祖父母的儿童风格*/
}
}
}
}

CSS输出

。祖父母{
/*祖父母风格*/
}
.祖父母{
/*父样式*/
}
.祖父母.父母.孩子{
/*子样式*/
}
.specialGrandparent.祖父母.父母.孩子{
/*有特殊祖父母的儿童风格*/
}

这段代码的工作原理是附加到祖父母选择器的“前面”，因此祖父母必须是类、ID或其他选择器本身

附录

基于当

span

为空时希望有红色背景的评论。这不会将背景放在父对象上，而是使用子对象“伪造”背景

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

根据LESS的说法，可以通过将

&

放在嵌套中的项之后来更改选择器顺序，从而访问项的父项的父项

代码更少：

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

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

CSS结果：

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

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

---

试着按照你的建议去做……但这不起作用：——注意最后一条少的规则。我试图在父div的子跨度不为空时，将其背景设置为红色。您的问题是，您正在尝试执行CSS无法执行的操作，而像LESS这样的预处理器将不会有帮助（因为它所做的只是生成有效的CSS）。LESS作为预处理器，不知道

span

是否为空（处理在送达浏览器之前完成；它不知道html的状态），并且。你需要使用javascript来做你想做的事情。@chovy:但是，一个解决办法是使用

span:empty:after

样式来应用背景。作为我答案的附录给出的代码。不确定span:empty:after得到我和我拥有的。但是我发现我不能基于祖先编写规则……所以我必须在运行时使用JS。@chovy:我以前没有使用过“fiddlesala.com”，也不知道如何保存它。但是如果您将

span:empty:after

代码插入非工作代码的位置，您将看到它给您带来了什么（当

span

为空时，

div的红色背景）。我认为更好的解决方案！