Селектор CSS последней строки из главной таблицы

У меня есть таблица внутри таблицы, и я хочу заполнить только фон последней строки таблицы 1 - не таблицу 2.

<style> 
#test tr:last-child
{
  background:#ff0000;
}
</style>

<table border="1" width="100%" id="test">
<tr>
 <td>
  <table border="1" width="100%">
   <tr>
    <td>table 2</td>
   </tr>
  </table>
 </td>
</tr> 

<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>

</table>

С моим CSS я раскрашиваю обе последние строки таблицы1 и table2.

Ответы

Ответ 1

Ваши таблицы должны иметь в качестве непосредственных дочерних элементов только элементы tbody и thead, а строки в *. Итак, измените HTML следующим образом:

<table border="1" width="100%" id="test">
  <tbody>
    <tr>
     <td>
      <table border="1" width="100%">
        <tbody>
          <tr>
            <td>table 2</td>
          </tr>
        </tbody>
      </table>
     </td>
    </tr> 
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
  </tbody>
</table>

Затем немного измените свой селектор:

#test>tbody>tr:last-child { background:#ff0000; }

Смотрите в действии здесь. Это использует дочерний селектор, который:

... разделяет два селектора и сопоставляет только те элементы, которые соответствуют второму селектору, которые являются прямыми дочерними элементами элементов, согласованных с первым.

Итак, вы нацеливаете только прямых детей из элементов tbody, которые сами являются прямыми дочерними элементами вашей таблицы #test.

Альтернативное решение

Вышеописанное является самым опрятным решением, так как вам не нужно перематывать какие-либо стили. Альтернатива должна заключаться в вашей текущей настройке и превышении стиля фона для внутренней таблицы, например:

#test tr:last-child { background:#ff0000; }
#test table tr:last-child { background:transparent; }

* Это не обязательно, но большинство (все?) браузеров добавят их, поэтому лучше всего сделать это явным. Поскольку @BoltClock заявляет в комментариях:

... теперь он установлен в камне в HTML5, поэтому для совместимости с браузером он в основном должен вести себя таким образом.