У меня есть таблица внутри таблицы, и я хочу заполнить только фон последней строки таблицы 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.
Ваши таблицы должны иметь в качестве непосредственных дочерних элементов только элементы 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, поэтому для совместимости с браузером он в основном должен вести себя таким образом.