Question

这就是我想要做的（简化示例）：

<table>
<tr>
  <td style = "border:2px solid green">stuff1 </td>
  <td style = "border:2px solid green">stuff2 </td>
  <td style = "border:2px solid green">stuff3 </td>
</tr>
<tr>
  <td style = "border:1px solid red">stuff4 </td>
  <td style = "border:1px solid red">stuff5 </td>
  <td style = "border:1px solid red">stuff6</td>

这给出了正确的结果，一行以绿色为边框，下一行以红色为边框，但是我想摆脱所有这些“样式”语句。

我尝试了几种方法来级联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>

这几乎奏效。第一行以绿色边框。但是最下面一行用红色和绿色作为边框。

有人可以向我解释如何设置CSS，以便获得所需的结果。

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

Answer 1

您可以将一个类添加到第二组tds中。参见下面的代码，或查看Codepen中的工作示例。

<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>

Codepen：https://codepen.io/anon/pen/NzygNV

Answer 2

您也可以这样做，例如将css类保存在单独的css文件中，然后仅在表所在的html中添加指向css文件的链接标记。请参考下面的链接

       .tbl {
	      font-size: 15px;
	    }
	    td {
	      border: 2px solid green;
	    }
	    td.red {
	      border:1px solid red;
	    }

<html>
<head>
<!-- you can ad link to css here -->
</head>
<body>
	<table class="tbl">
		<tr>
			<td>column1</td>
			<td>column2</td>
			<td>column3</td>
        </tr>
        <tr>
			<td class="red">data1</td>
			<td class="red">data2</td>
			<td class="red">data3</td>
		</tr>
	</table>
</body>
</html>

https://codepen.io/anon/pen/PaQJNK

对表td使用两种CSS样式

2 个答案: