表格中标题后第一个TH的CSS选择器

Question

我有一个table，我只想在TH包含caption时选择第一个.myTable caption + tr th:first-child { /* stuff */ } 。我认为它可能是这样的：

.objectTable th:first-child
{
    background-color: blue;
    color: white;
}

.objectTable caption + tr th:first-child
{
    background-color: red;
}

而不是选择任何东西。这是CSS中的错误还是我的逻辑？

请参阅我的JSFiddle：https://jsfiddle.net/ukb13pdp/1/

<table class='objectTable'>
    <caption>Caption Table</caption>
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
<br/><br/>
<span>No Caption Table</span>
<table class='objectTable'>
    <tr>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

BigDecimal

Answer 1

此处的原因与this related question中描述的关于使用tr的子选择器的原因完全相同。问题是tr元素是隐式tbody元素的子元素，因此最终成为caption的兄弟是tbody而不是{{1} }}：

tr

顺便说一句，如果您的.myTable caption + tbody th:first-child 元素位于标题行中，理想情况下它们应包含在th元素中，并且数据行包含在显式thead元素中：

tbody

使用

选择

<table class=myTable>
  <caption>Table with header group</caption>
  <thead>
    <tr><th>Header<th>Header
  <tbody>
    <tr><td>Row 1<td>Row 1
    <tr><td>Row 2<td>Row 2
</table>

Answer 2

您忘记了包装<tbody>元素的<tr>元素。尽管未在您的（否则无效的）HTML中指定，但<tbody>元素会自动由浏览器实现，以此作为验证此内容的方式，而不是：

<caption>
<tr>

你最终得到：

<caption>
<tbody>
    <tr>

如下面的元素检查器捕获中所示：

要选择<tr>元素之后的第一个<caption>元素，您可以使用：

caption + tbody tr:first-child {
    ...
}

JSFiddle demo