Question

我有一个表，我需要根据特定的属性值应用不同的条件样式。以下是我要更新的表格的片段：

<table table-type= "source">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>

我需要动态更改的属性是table-type。例如，当表格类型为“源”时，我需要将其背景颜色设置为黄色，如果是“目标”，则其背景颜色将为红色。

Answer 1

这在CSS中非常简单，如下所示

table[table-type="source"] { 
    background-color: yellow;
}

table[table-type="target"] { 
    background-color: red;
}

Answer 2

您想要使用CSS属性选择器。这是资源https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

table[table-type="source"] {
  background: yellow;
}

table[table-type="target"] {
  background: red;
}

<table table-type="source">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<table table-type="target">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

表CSS样式：如何创建条件CSS类

2 个答案: