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

Question

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

Answer 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; } 

в действии here. Это делает использование child selector, который:

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

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

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

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

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

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

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