Question

我有这样的表：

表1：

<table> 
 <tr>
  <th>Title1</th>
  <th>Title2</th>
  <th>Title3</th>
  <th>Title4</th>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text3</td>
  <td>Text4</td>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text3</td>
  <td>Text4</td>
 </tr>
</table>

表2：

<table> 
 <tr>
  <th>Title1</th>
  <th>Title2</th>
  <th>Title4</th>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text4</td>
 </tr>
 <tr>
  <td>Text1</td>
  <td>Text2</td>
  <td>Text4</td>
 </tr>
</table>

表3：

<table> 
 <tr>
  <th>Title4</th>
 </tr>
 <tr>
  <td>Text4</td>
 </tr>
 <tr>
  <td>Text4</td>
 </tr>
</table>

这里我有3个表（3个表不是常数。但是所有表都有 Title4 标题但位置不同。我需要更改文本“Title4”的所有表的颜色而不使用jquery / javascript。仅在css中使用。有任何建议吗？

Answer 1

来自@shaggy的更新优点：你想要做的是添加一个类（不止一次使用类），它是包含Title4的每个.元素的css选择器<th>。

<th class="blue">Title4</th>

.blue {
  color: blue;
}

http://codepen.io/anon/pen/gpXQOM

离开参考，这应该使用第n个子选择器。它利用能够选择元素的某个子元素。它首先查找任何<table>，然后（4）代表表格中的第四个<th>，这里是title4！

 table th:nth-child(4) {
        background: blue;
    }

在不使用jquery / javascript的情况下查找文本并添加css

1 个答案: