html - 在不使用 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 的更新要点:你想要做的是添加一个类(类被多次使用)这是 css 选择器 .每个 <th>将包含 Title4 的元素。

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