如何从祖父母标签继承css？

Question

我有一个两级嵌套div,我想应用div持有一个类"c",div的宽度与a类相同.如果它是父母,那么我猜继承将完成这项工作.但在这种情况下该怎么做？

HTML代码:

<div class="a">
  <div class="b">
     <div class="c">

     </div>
  </div>
</div>

CSS代码

.a{
 width:600px;
}
.b{
width:80%;
}
.c{
//needs to inherit width property set for class a without directly mentioning it as 600px
}

Answer 1

遗憾的是你不能在纯CSS中执行此操作,默认情况下,子元素永远不会继承width,你需要指定它,是的,默认情况下,如果你使用像块div或p标签这样的块级元素但是为了继承它会超过100%(re使用)祖父母的财产,你可以使用像LESS或SASS这样的CSS预处理器.

因此,如果您想在SASS中执行此操作,我们可以执行类似的操作

.a {
  width: 600px;
}

.b {
  width: 80%;
}

.c {
  @extend .a;
  //This is still not an inheritance, you are simply pulling in all the
  //properties defined in .a to this class
}

因此,这里将选择所有属性从.a到.c.但是这里有一个问题,当你.在SASS中使用符号时,它也会逐字地打印.a块,所以如果你只想将它用于@extend目的,你可以编写这个选择器而不是

%a {
  width: 600px;
}

.c {
  @extend %a;
}

在这里,SASS将不再打印.a,但仅限于.c.您可以通过SASS @extend更多地参考官方文档

您还可以在SASS中定义变量,因此定义一个变量$base-width: 600px;并重新使用它也是有意义的.如果你仍然想要坚持使用传统的CSS而不是我建议你像Manoj建议的那样声明多个类,但是我不会这样做,就好像你宣布任何属性.a并且相同的.c东西会开始变得混乱.