CSS selector hàng cuối cùng từ bảng chính

Question

Tôi có một bảng bên trong một bảng, và tôi muốn tô nền của dòng cuối cùng của bảng 1 chỉ - không bảng 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> 

Với CSS của tôi, tôi 'm tô màu cả hai hàng cuối cùng của table1 và table2.

Answer 1

Bảng của bạn phải có con ngay lập tức chỉ tbody và thead yếu tố, với các hàng bên trong *. Vì vậy, sửa đổi HTML để được:

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

Sau đó sửa đổi selector bạn một chút để này:

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

Nhìn thấy nó trong hành động here. Điều đó làm cho việc sử dụng số điện thoại child selector, trong đó:

... phân tách hai bộ chọn và chỉ khớp các phần tử được so khớp với bộ chọn thứ hai là con trực tiếp của các phần tử được so khớp thứ nhất.

Vì vậy, bạn chỉ nhắm mục tiêu đến trẻ em trực tiếp là tbody các yếu tố là chính trẻ em trực tiếp của bảng #test.

Giải pháp thay thế

Ở trên là giải pháp gọn gàng nhất, vì bạn không cần phải vượt quá bất kỳ kiểu nào. The alternative sẽ gắn bó với hiện tại thiết lập của bạn, và trên-đi xe kiểu nền cho bảng bên trong, như thế này:

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

* Đó là không bắt buộc nhưng hầu hết (? Tất cả) các trình duyệt sẽ thêm các trong, vì vậy tốt nhất là làm cho nó rõ ràng. Khi trạng thái @BoltClock trong các nhận xét:

... giờ đây trình duyệt được đặt trong HTML5, vì vậy trình duyệt tuân thủ về cơ bản nó phải hoạt động theo cách này.