Soru CSS seçici son satır ana tablodan


Bir tablonun içinde bir masa var ve sadece tablo 1'in son satırının arka planını doldurmak istiyorum - tablo 2 değil.

<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 ile, tablo1 ve tablo2'nin son satırlarını boyayorum.


25
2018-04-15 08:30


Menşei


İki tabloyu tanımlamak için bir sınıf veya benzersiz bir kimlik özniteliği ekleyin. - Alex Lynham


Cevaplar:


Masalarınız hemen çocuk sahibi olmalı tbody ve thead içinde satırları olan elemanlar *. Yani, HTML'yi aşağıdaki gibi değiştirin:

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

Ardından, seçicinizi biraz değiştir:

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

Eylemde görün İşte. Bu kullanır çocuk seçici, hangi:

... iki seçiciyi ayırır ve sadece ilk seçimle eşleşen öğelerin doğrudan çocukları olan ikinci seçici tarafından eşleşen öğeleri eşleştirir.

Yani, sadece doğrudan çocukları hedefliyorsunuz tbody kendinizin çocukları olan #test tablo.

Alternatif çözüm

Yukarıdakiler, herhangi bir stilin üzerine gitmenize gerek olmadığı için en temiz çözümdür. Alternatif şu anki kurulumunuza bağlı kalmak ve iç tablonun arka plan stilini aşmak gibi:

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

* Zorunlu değil ama çoğu (tümü?) Tarayıcı bunu ekleyecektir, bu yüzden bunu açık yapmak en iyisidir. @BoltClock yorumlarda belirtildiği gibi:

... artık HTML5'te taş olarak ayarlanmış, dolayısıyla bir tarayıcının uyumlu olması için temel olarak bu şekilde davranması gerekiyor.


53
2018-04-15 08:35



Bu işe yaramıyor jsfiddle.net/WFgvd - JackPoint
Eğer bir TBODY, müşteri bir tane ekleyecektir. Ve eğer bir THEAD veya TFOOT, seçiciler #test>tbody>tr:last-child ve #test tr:last-child aynı sırayı seçer, ikincisi daha düşük bir özgüllüğe sahiptir. - feeela
@feeela: İç bir tablo var - eski seçmen tr:last-child bu tabloda. Yani, haklısın, açıkça eklemek için gerek yoktur tbody işaretleme etiketleri. - BoltClock♦
@JackPoint - evet, özür dilerim - ikinciyi kaçırdım > Başlangıçta. Güncellenmiş cevap ve keman. - CherryFlavourPez
@BoltClock: herhangi bir sebep var mı değil eklemek için tbody? Sanırım, seçmen (ler) inin sessizce eklendikleri için beklediklerimi hedeflemediği bu kesin durumdan kaçınmak için bunu açıkça daha rahat hissediyorum. - CherryFlavourPez