less-css - 是否可以获取父级的父级？

问题描述

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

我试过& &

我想根据它的祖父母对子元素进行样式化。

解决方案

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

$ b如果祖父母是一个元素

$ b

这需要一些重复，但允许祖父母不是最外层的包装器（所以可能有一个伟大的祖父母）。

LESS

  grandparent {
 / *祖父类型* / 
父类{
 / *父类型* / 
子类{
 / *子类型* / 
} 
} $ b b& .specialGrandpa {
 child {
 / *特殊爷爷的儿童风格* / 
} 
} 
& .specialGrandma {
 child { 
 / *特殊奶奶的儿童风格* / 
} 
} 
} 
  

CSS输出

  grandparent {
 / * grandparent styles * / 
} 
祖父母{
 / *父母样式* / 
} 
祖父母子{
 / *儿童风格* / 
} 
 grandparent.specialGrandpa儿童{
 / *特殊爷爷的儿童风格* / 
} 
 grandparent.specialGrandma孩子{
 / *特殊奶奶的孩子样式* / 
} 
  

strong>如果Grandparent是类，ID等，并且是最外面的包装

你不能在组合中有伟大的祖父母。此外，这仅适用于LESS 1.3.1+版本（早期版本不正确地添加了空格）：

LESS

  .grandparent {
 / *祖父样式* / 
 .parent {
 / * parent styles * / 
 .child {
 / * child styles * / 
 .specialGrandparent& {
 / *特殊祖父母的子类型* / 
} 
} 
} 
} 
  

CSS输出

  .grandparent {
 / *祖父风格* / 
} 
 .grandparent .parent {
 / *父风格* / 
} 
 .grandparent .parent .child {
 / * child styles * / 
} 
 .specialGrandparent.grandparent .parent .child {
 / *特殊祖父母* / 
} 
  

此代码通过附加到祖父母选择器，因此祖父母必须是类，ID或其他选择器本身。

附录

基于对 span 为空时希望拥有红色背景的意见。

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

Is it possible to get a parent's parent?

I tried & & { } but that didn't work.

I'm trying to style a child element based on it's grandparent.

解决方案

Depends on Code Structure, and may Require Some Repetition of Code

You cannot do it directly in most cases (see second example for exception).

If Grandparent is an element

This requires some repetition, but does allow for the grandparent to not be the outermost wrapper (so there could be a great grandparent).

LESS

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

CSS Output

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

If Grandparent is a class, ID, etc., and is the outermost wrapper

No repetition involved here, but you cannot have a great grandparent in the mix. Also this is only for LESS 1.3.1+ version (earlier version incorrectly add a space):

LESS

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

CSS Output

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

This code works by appending to the "front" of the grandparent selector, so that is why the grandparent must be a class, ID, or other selector itself.

Addendum

Based on comment about desire to have a red background when the span is empty. This does not put the background on the parent, but "fakes" it using the child.

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

这篇关于less-css - 是否可以获取父级的父级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！