Question

我正在尝试使用CSS选择器解决特定问题。我有fo HTML 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，它将背景颜色应用于两个“Region”表的第th个元素：

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

但是我想应用背景颜色：＃BAD80A只到第一次出现“Region”

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

任何帮助将不胜感激！

由于

Answer 1

您可以使用first-child上的td伪造选择器，然后定位th内的.region。

这是一个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

/*Both work fine*/

table.Layout td:first-child th{
    background: #555;
}

td:first-child th{
    background: #555;
}

JSFiddle - http://jsfiddle.net/uL9uLLuf/

在文档中表的第一个出现的目标元素

2 个答案: