Question

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

HTML CODE：

<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，您需要指定它，是的，默认情况下，如果您使用块级元素，它将超过100％ div或p标记，但为了继承（重新使用）祖父的属性，您可以使用CSS预处理器，如LESS或SASS ..

因此，如果您想在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中一样开始变得凌乱。

Answer 2

您可以将多个类添加到孙子div中，以{1}} a到c的属性。

同时为include设置80％将导致.b的600px = 480px的80％需要将其修改为100％。

.c

.a {
  width: 600px;
}
.b {
  width: 100%;
}

Answer 3

以下是一种可能性，因此可能有用，但不建议将其作为大多数情况下的最佳方式。它让我想起了em单位的问题。

使用带变量的预处理器是一种更好的方法，虽然它不是完全继承，也不是纯粹的CSS。

.a {
    width:600px;
}
.b {
    width:80%;
}
.c {
    width: 125%;
}

.c { width }为100 / .b { width } * 100，或示例为125％。

查看example here on JSFiddle

您仍然继承父母，但父母继承祖父母。

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

3 个答案: