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

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 个子选择器。它利用了能够选择元素的某个子元素的优势。它首先查找任何，然后 (4) 代表表中的<table>第四个，它是 title4！<th>

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