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

我有一个两层嵌套的div，我想将包含类“c”的div应用于与类a具有相同宽度的div。如果它是父对象，那么我想inherit将完成这项工作。但在这种情况下该怎么办呢

HTML代码：

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

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

---

不幸的是，在纯CSS中无法做到这一点，默认情况下，子元素从不继承

宽度

，您需要指定它，是的，默认情况下，如果您使用块级元素，如

div

或

p

标记，它将跨越100%，但为了继承（重复使用）grand parent的属性您可以使用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中定义变量，以便使用

$base width:600px并跨多个应用程序重新使用它也有意义。如果你仍然想坚持使用传统的CSS，我建议你像Manoj建议的那样声明多个类，但我不会像在
.a
和
.c
中声明任何属性那样这样做。事情会开始变得一团糟。
你可以向孙子div添加多个类以
包括a到c的属性

另外，为
.b
设置80%将导致为
.c
设置80%的600px=
480px
。您需要将其修改为100%


.a{
宽度：600px；
}
.b{
宽度：100%；
}

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

使用带有变量的预处理器是一种更好的方法，尽管它既不是完全的继承，也不是纯粹的css

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

其中
.c{width}
是
100/.b{width}*100
，或者在示例中是125%

见

您仍然从父级继承，但父级又从祖父母继承。
这不是类继承
c
永远不会继承
a
Oops，我的意思是
包括
而不是
inherit
我建议使用一个变量：
$width:600px
和
.c{width:$width；}
超过
@extend
因为后者可能会产生意外和棘手的后果我打算在我自己的答案中写出来，但我想它可能会丢失。我先写了它，然后删除了它，因此，我想再次添加它，因为它也是处理此类内容的最佳方法之一
@extends
已经给我带来了很多麻烦，这就是为什么我很小心的原因-我现在只在BEM/OOCSS类型设置的模块中使用它，最好是在相同的sass文件中使用它使用sass或更少也有其他好处。
.a {
    width:600px;
}
.b {
    width:80%;
}
.c {
    width: 125%;
}