具有相同样式的多个类的简写CSS

时间:2014-02-20 17:57:51

标签: css

是否有一种速记方式来编写以下具有相同风格的css类?

.gtlab1-17, .gtlab1-19, .gtlab1-21, .gtlab2-17, .gtlab2-19, .gtlab2-21, .gtlab3-17, .gtlab3-19, .gtlab3-21 {margin-left:-3px;}

我需要避免接受:

.gtlab1-16, .gtlab2-16, .gtlab3-16
and
.gtlab1-15, .gtlab2-15, .gtlab3-15

有不同的风格。

感谢。

3 个答案:

答案 0 :(得分:0)

使用更多课程?似乎gtlab2部分描述了一个方面,而数字代表另一个方面。为什么不将它分成两个可以一起使用的不同类?

答案 1 :(得分:0)

简短回答是:

[class*=gtlab]:not([class*=-16]):not([class*=-15])

但是根据你的其他代码和预期的浏览器支持(IE8?),这可能不起作用。

很长的答案是,如果您有这个选项,或者只是使用长版本,那么更改您的HTML,它在编码时间或下载时间方面实际上不会花费更多,并且可能会更快地呈现。

答案 2 :(得分:0)

Mabye试试这个:

div[class^="gtlab"] {
    border: 1px solid magenta;
}

div.gtlab2-16, div.gtlab1-57 {
  border: 0;
}

如果找到在其类中某处有“gtlab”的div,然后覆盖您想要排除的那些。

引用就在这里:这个网站我已经加了书签,我一直在重访这个页面http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

你可以像建议的那样为所有元素添加相同的类,但是如果你没有访问html(使用CMS或者什么)你可以使用jQuery .addClass()和{{1}为元素添加一个类作为你的选择器。