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

【问题标题】：Shorthand CSS for multiple classes with the same style具有相同样式的多个类的简写 CSS
【发布时间】：2014-02-21 02:27:19
【问题描述】：

有没有一种简写方式来编写以下样式相同的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

有不同的风格。

谢谢。

【问题讨论】：

标签： css

【解决方案1】：

不妨试试这个：

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() 向元素添加一个类并具有 div[class^="gtlab"]作为您的选择器。

【讨论】：

【解决方案2】：

简短的回答是：

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

但根据您的其余代码和预期的浏览器支持（IE8？），这可能不起作用。

长答案是，如果您有该选项或仅使用长版本，请更改您的 HTML，这实际上不会花费您更多的编码时间或下载时间，并且可能会更快地呈现。

【讨论】：

感谢 Godwin，鉴于您对渲染的评论，我可能会接受这个作为答案 - 做很长的路要走。我只是认为可能有一个通配符方法，例如： .gtlab*-17, .gtlab*-19, .gtlab*-21 {}

【解决方案3】：

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

【讨论】：