根据单元格内容更改表格行的文本颜色，仅使用 css

Change text color of a table row based on cell content, Using Css Only

本文关键字：颜色 文本 css 单元格 表格      更新时间：2023-09-26

我得到了两个文件，HTML和CSS，我必须根据HTML文件中的单元格内容更改一些表格行"文本颜色"。但问题是我只需要更改 Css 文件（不接触 HTML 文件）才能实现这一点。任何人都可以帮助我，我将不胜感激。

下面的文档是完整的CSS文件，HTML文件，要实现的输出的图像（链接）

body, div, h1, form, fieldset, input, textarea {
	margin: 0; padding: 0; border: 0; outline: none;
}
table {
  margin: 1; 
  padding: 0; 
  border: 1px; 
  outline: none;
  background:#FFF;
  border-style:solid;
  border-color:#AAA;
  position: relative;
  top: 200px;
}
th {
  background:gray;
}
td {
  border-color:#AAA;
}
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color:#000000;
  position:relative;
  background:#D2D9DD
}
.panel {
}
.panelHeader {
}
.panelContent {
}
<html>
<body> 
<div align="center">
	 <table id="allData">
	  <tbody>
	    <tr>
	      <th>Number</th>
	      <th>Name</th>
	      <th>Value</th>
	    </tr>
	    <tr>
	      <th>1.</th>
	      <td>Name 1</td>
	      <td>Value 1</td>
	    </tr>
	    <tr>
	      <th>2.</th>
	      <td>Name 2</td>
	      <td>Value 2</td>
	    </tr>
	    <tr>
	      <th>100.</th>
	      <td>Name 100</td>
	      <td>Value 100</td>
	    </tr>
	    <tr>
	      <th>1.</th>
	      <td>Name 1</td>
	      <td>Value 1</td>
	    </tr>
	    <tr>
	      <th>2.</th>
	      <td>Name 2</td>
	      <td>Value 2</td>
	    </tr>
	    <tr>
	      <th>100.</th>
	      <td>Name 100</td>
	      <td>Value 100</td>
	    </tr>
	    <tr>
	      <th>1.</th>
	      <td>Name 1</td>
	      <td>Value 1</td>
	    </tr>
	    <tr>
	      <th>2.</th>
	      <td>Name 2</td>
	      <td>Value 2</td>
	    </tr>
	    <tr>
	      <th>100.</th>
	      <td>Name 100</td>
	      <td>Value 100</td>
	    </tr>
	    <tr>
	      <th>1.</th>
	      <td>Name 1</td>
	      <td>Value 1</td>
	    </tr>
	    <tr>
	      <th>2.</th>
	      <td>Name 2</td>
	      <td>Value 2</td>
	    </tr>
	    <tr>
	      <th>100.</th>
	      <td>Name 100</td>
	      <td>Value 100</td>
	    </tr>
	    <tr>
	      <th>1.</th>
	      <td>Name 1</td>
	      <td>Value 1</td>
	    </tr>
	    <tr>
	      <th>2.</th>
	      <td>Name 2</td>
	      <td>Value 2</td>
	    </tr>
	    <tr>
	      <th>100.</th>
	      <td>Name 100</td>
	      <td>Value 100</td>
	    </tr>
	  </tbody>
	</table>
</div>
</body>
</html>

最后结果应该是这样的：

===>友情链接：点击这里查看图片结果<===

仅使用 css

简短的回答：你不能。CSS 无法读取元素的内容。

相关文章：