html - 在文档中第一次出现 Table 时定位 <th> 元素

Question

我正在尝试解决 CSS 选择器的特定问题。我有以下 HTML:

<table class="Layout">
    <tr>
	<td>
	    <table class="Region">
		<tbody>
		    <tr>
			<th align="left">Header 1</th>
		    </tr>
		    <tr>
			<td>
			    <table class="SelectionTable">
				<tbody>
				    <tr>
					<td>Text 1</td><td>Text 2</td>
				    </tr>
				</tbody>
			    </table>
			</td>
		    </tr>
		</tbody>
	    </table>
	</td>
	<td valign="top"></td>
	<td valign="top">
	    <table class="Region">
		<tr>
		    <th align="left" colspan="2">Header 2</th>
		</tr>
                <tr>
		    <td>Text 1</td><td>Text 2</td>
		</tr>	
            </table>
	</td>
    </tr>
</table>

我需要做的是选择文档中第一次出现的类“Region”，然后选择第 th 元素，其中包含文本“Header 1”(只有这些表中的第 1 个元素)。我这样做的原因是我可以为这个元素应用背景颜色。

我目前有这个 css，它将背景颜色应用于两个“区域”表的第 th 个元素:

TABLE.Region TH {background-color: #00A5DB;}

但我只想将背景颜色:#BAD80A 应用于“区域”的第一次出现

我知道我可以使用 javascript 实现这一点，而且我知道这是在页面上排列元素的老方法，但这是对包含许多页面的公司内部网的更改，因此仅更改样式表将是目前为止实现这一目标的最快方法，因为我现在真的没有时间进行彻底的改变!我们使用 IE11 作为我们的主要浏览器，因此如果需要，答案可以非常具体。

如有任何帮助，我们将不胜感激!

谢谢

Answer 1

您可以在 td 上使用 first-child 伪选择器，然后将 th 定位到 .region.

这是一个演示:

td:first-child .Region th {
  background-color: red;
}

<table class="Layout">
  <tr>
    <td>
      <table class="Region">
        <tbody>
          <tr>
            <th align="left">Header 1</th>
          </tr>
          <tr>
            <td>
              <table class="SelectionTable">
                <tbody>
                  <tr>
                    <td>Text 1</td>
                    <td>Text 2</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td valign="top"></td>
    <td valign="top">
      <table class="Region">
        <tr>
          <th align="left" colspan="2">Header 2</th>
        </tr>
        <tr>
          <td>Text 1</td>
          <td>Text 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>