为表td使用两种css样式_Css_Html Table

为表td使用两种css样式

css

为表td使用两种css样式,css,html-table,Css,Html Table,下面是我想做的（简化示例）：材料1 材料2 物品3 物品4 物品5 填充物6 这给出了正确的结果，一行用绿色边框，下一行用红色边框，但我想去掉所有那些“样式”语句为此，我尝试了几种级联css的方法，但没有找到一种可行的方法。我得到的最接近的结果是： <head> <style> .test { font-size: 15px; } .test td { border: 2px solid green } .test td a

下面是我想做的（简化示例）：


材料1
材料2
物品3
物品4
物品5
填充物6

这给出了正确的结果，一行用绿色边框，下一行用红色边框，但我想去掉所有那些“样式”语句

为此，我尝试了几种级联css的方法，但没有找到一种可行的方法。我得到的最接近的结果是：

<head>
<style>
  .test {
    font-size: 15px;
  }

  .test td {
    border: 2px solid green
  }

  .test td a{
     border: 1px solid red
  }

 </style>
 </head>

<body>
<table  class = "test">
   <tr>
      <td>stuff1 </td>
      <td>stuff2 </td>
      <td>stuff3 </td>
  </tr>
  <tr>
      <td><a>stuff4</a> </td>
      <td><a>stuff5</a> </td>
      <td><a>stuff6</a> </td>
  </tr>
</table>

</body>


.测试{
字体大小：15px；
}
.测试运输署{
边框：2件纯绿
}
.测试td a{
边框：1px纯红
}
材料1
材料2
物品3
物品4
物品5
填充物6

这几乎奏效了。第一排用绿色镶边。但最下面一行的边框是红色和绿色

有人能告诉我如何设置我的css以便我能得到我想要的结果吗

**************嗯，我找到了一个解决方案，使用.test th{作为第二种颜色。但是如果我想要第三种颜色，这并不能解决任何问题。

您可以只向第二组tds添加一个类。请参阅下面的代码或检查代码笔以获得工作示例

<html>
<head>
    <style>
        .test {
          font-size: 15px;
        }
        td {
          border: 2px solid green;
        }
        td.red {
          border: 1px solid red;
        }
    </style>
</head>
<body>
    <table class="test">
        <tr>
            <td>stuff1</td>
            <td>stuff2</td>
            <td>stuff3</td>
        </tr>
        <tr>
            <td class="red">stuff4</td>
            <td class="red">stuff5</td>
            <td class="red">stuff6</td>
        </tr>
    </table>
</body>
</html>


.测试{
字体大小：15px；
}
运输署{
边框：2倍纯绿；
}
红色{
边框：1px纯红；
}
材料1
材料2
物品3
物品4
物品5
填充物6

Codepen:

您也可以这样做，比如将css类保存在单独的css文件中，然后在html中添加指向css文件的链接标记，在您的表格中。请参阅下面的链接以了解相同内容

.tbl{
字体大小：15px；
}
运输署{
边框：2倍纯绿；
}
红色{
边框：1px纯红；
}


专栏1
专栏2
第3栏
数据1
数据2
数据3

<html>
<head>
    <style>
        .test {
          font-size: 15px;
        }
        td {
          border: 2px solid green;
        }
        td.red {
          border: 1px solid red;
        }
    </style>
</head>
<body>
    <table class="test">
        <tr>
            <td>stuff1</td>
            <td>stuff2</td>
            <td>stuff3</td>
        </tr>
        <tr>
            <td class="red">stuff4</td>
            <td class="red">stuff5</td>
            <td class="red">stuff6</td>
        </tr>
    </table>
</body>
</html>