如何摆脱重复的语句行

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说，也可以创建一个更加新的类，并将其应用，无论你使用的是像下面。在这个概念中，你必须同时应用班级和身份证。

.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; 
}