将 CSS 个声明合并为一个，可能吗？

Question

我正在努力解决我遇到的一个小问题。

我正在设计传单中的地图。我想要实现的是在传单地图中的每个标记上方添加一个 HTML 标签，就像这个经过 Photoshop 处理的示例：

好的，每个标签显示的代码是：

HTML

<table>
    <tr>
        <td class="red"></td>
        <td class="yellow"></td>
        <td class="orange"></td>
        <td class="blue"></td>
    </tr>
</table>

CSS

table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.red{
    background-color:#F15E66;
}
.yellow{
    background-color:#FFDB64;
}
.orange{
    background-color:#F58326;
}
.blue{
    background-color:#85B1DE;
}

检查 https://jsfiddle.net/YameenYasin/cx1ka3Ly/ 以获取实时代码。

好的，当传单标签只允许为每个标签添加一个唯一的 CSS 条目时，问题就来了。示例：

marker.bindLabel('<table><tr><td class="red"></td><td class="yellow"></td><td class="orange"></td><td class="blue"></td></tr></table>',
    {noHide: true, className: "onlyone", offset: [-10, -40] });

注意类名："onlyone" 属性。我只能在那里放一个 css 并且在 html 代码中添加的 "class" 标签没有被执行（它们不起作用）。

我的结论是，我需要将所有 CSS 代码添加到一个名为 "onlyone" 的类名中，这样我就可以执行 className: "onlyone".

这可能吗？

此致，

Answer 1

可以将单个 class 添加到 tr，然后使用 nth-child 按 'number' 定位子项，如下所示。

table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 5px solid black;
}
.multi td:nth-child(1) {
  background-color: #F15E66;
}
.multi td:nth-child(2) {
  background-color: #FFDB64;
}
.multi td:nth-child(3) {
  background-color: #F58326;
}
.multi td:nth-child(4) {
  background-color: #85B1DE;
}

<table>
  <tr class="multi">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

给你： https://jsfiddle.net/cx1ka3Ly/2/

table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.onlyone:nth-child(1){
    background-color:#F15E66;
}
.onlyone:nth-child(2){
    background-color:#FFDB64;
}
.onlyone:nth-child(3){
    background-color:#F58326;
}
.onlyone:nth-child(4){
    background-color:#85B1DE;
}

将 CSS 个声明合并为一个，可能吗？

Merge CSS declarations in one, possible?

html

css

google-maps