Question

我有css文件，但它很难看，因为它复制了一行语句。我想知道有一种方法可以在一个地方收集所有重复的陈述，而其他人则会使用它。

我的css

#cont-link{
    width:11%; 
    float:right; 
    right:240px;
}

#cont-twi{
    width:11%; 
    float:right; 
    right:180px;
}

#cont-goo{
    width:11%; 
    float:right; 
    right:120px;
}

#cont-fac{
    width:11%; 
    float:right; 
    right:60px;
}

#cont-dat{
    width:11%; 
    float:right; 
    right:0px;  
}

如您所见，每个id的前两行具有相同的语句。我怎样才能摆脱重复？

Answer 1

您可以将它们全部合并到一个选择器中，只需使用right的每个特定选择器。

#cont-link, #cont-twi, #cont-goo, #cont-fac, #cont-dat{
   width:11%; 
   float:right;
}
#cont-link {right: 240px;} /* etc */

Answer 2

您可以将常用属性提取到单独的块中。

#cont-link, #cont-twi, #cont-goo{
    width:11%; 
    float:right; 
}

#cont-link{
    right:240px;
}

#cont-twi{
    right:180px;
}

#cont-goo{
    right:120px;
}

或者，您可以使用CSS扩展语言，如SASS或LESS。

Answer 3

您可以在所有元素中包含常用参数，然后为每个id指定不同的参数。

#cont-link, #cont-twi, #cont-goo, #cont-fac, #cont-dat{
    width:11%; 
    float:right; 
}

#cont-link{
    right:240px;
}

#cont-twi{
    right:180px;
}

#cont-goo{
    right:120px;
}

#cont-fac{
    right:60px;
}

#cont-dat{
    right:0px;  
}

或者您可以使用某些CSS扩展语言，例如SASS或Less

Answer 4

您可以像Scimonster所说的那样创建，也可以创建一个新类，并将其应用到您使用的任何地方，如下所示。在这个概念中，你必须在任何你想要的地方同时应用类和ID。

.commonstyle
{
  width:11%; 
  float:right;
}
#cont-link{
  right:240px;
}

#cont-twi{
  right:180px;
}

#cont-goo{
  right:120px;
}

#cont-fac{
  right:60px;
}

#cont-dat{
  right:0px;  
}

如何摆脱重复的陈述

4 个答案: