代码之家  ›  专栏  ›  技术社区  ›  orochi

如何在CSS中进行继承?

  •  1
  • orochi  · 技术社区  · 6 年前

    我有以下问题:

    我在CSS类中有一个给定样式的字体:

    .font_arial_36 {
        font-family:Arial;
        font-size:36px;
    }
    

    现在我有了一个CSS,在给定的情况下,它给了我一个DIV的大小:

    .a_div_test {
        width:300px;
        max-width:350px;
    }
    

    我希望a-div-u测试具有字体“Arial”36的属性,就像 遗传 .

    有点像(这是错误的,只是张贴我想要的):

    .font_arial_36 {
        font-family:Arial;
        font-size:36px;
    }
    
    .a_div_test extends font_arial_36 {
        width:300px;
        max-width:350px;
    }
    

    现在,.a-div-u测试还应该具有字体“Arial”36属性。

    有没有可能使用CSS?

    PS:我不想向这样的HTML元素添加多个类:

    <div class="font_arial_36 a_div_test"></div>
    

    因为我应该在很多地方重写我的代码。

    5 回复  |  直到 6 年前
        1
  •  3
  •   sri harsha    6 年前

    这在CSS中是不可能的。您要做的是将两个类分配给您想要的元素。

    <div class="font_arial_36 a_div_test"></div>
    
        2
  •  1
  •   leuquim    6 年前

    CSS代表“层叠样式表”。这意味着顶级元素将其样式级联到其子元素。只要 .a_div_test 元素包含在元素的子树中 .font_arial_36 ,它们将接收(继承)来自 FuntAlARAL3636 .

    这就是为什么你定义了 font-family 里面 <body> 如果要将其应用于页面中的所有元素,请标记。

    也就是说,继承是由HTML结构定义的,而不是CSS本身。

        3
  •  0
  •   xkeshav    6 年前

    当可以在HTML元素上添加多个带有空格的类时,为什么需要扩展?

    <div class="font_arial_36 a_div_test">Like this</div>
    
        4
  •  0
  •   Yogee    6 年前

    正如其他人所建议的,一旦CSS属性变为其他属性,就无法继承它。唯一的方法是将两个类都添加到一个DOM元素中,以模拟继承。CSS解决方案:

    <button class="uiButton disabledButton">Click Here</button>
    

    对于以下CSS:

    .uiButton {
      background-color: gray;
      color: lightgray;
      font-size: 20px;
      font-family: "Segoe UI", Helvetica, sans-serif;
      text-align: center;
      text-decoration: none;
    
      padding: 10px 10px;
      border:none;
      display: inline-block;
      margin: 5px 5px;
      cursor: pointer;
    }
    
    .disabledButton
    {
        background-color: gray;
        color: lightgray;
        cursor: not-allowed;
    }
    

    在上面:按钮的样式首先是uibutton类,然后是disabledbutton类。因此,无论您稍后在“class”属性中编写哪个CSS类,都将覆盖先前的类的属性(如果有任何常见的情况)。

    但是,还有更好的方法:

    是的,如果您准备好使用CSS预处理器,例如 https://sass-lang.com/guide

    注意,sass是一个预处理器。也就是说,sass文件(.scss)将被编译成css(但chrome为.scss,即sass文件提供了很好的调试)。您可以在scss文件中编写普通的css,另外还可以使用指令来实现继承等等。为了使生活更容易,有些软件会在修改scss文件时自动创建css(我知道 http://koala-app.com/ 就是这样)。

        5
  •  0
  •   Sashi yadav    6 年前

    如果不想在HTML元素中添加多个类,那么

    .font_arial_36, .a_div_test {
     font-family:Arial;
     font-size:36px;
    }
    
    .a_div_test {
      width:300px;
      max-width:350px;
    }
    

    除此之外,在CSS中似乎没有其他可能的继承方法,我们必须使用sas