pilih semua elemen dalam kelas induk

Saya punya dua meja, ini baru yang ke-2. Saya ingin menata tabel ke-2 tanpa mempengaruhi tabel pertama. Saya juga tidak mau harus id atau membuat kelas untuk setiap tag. Visual studio sepertinya memahami apa yang saya perintahkan tetapi tidak menerjemahkannya ke halaman web. Apa yang saya lewatkan?

<style>
    .t2 > tr th td{
                   border: 1px solid white;
               }
    </style>

    <table class="t2">
            <tr>
                <th>Column 1</th>

            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>

            </tr>


        </table>

class html css parent-child styles
person Tugboat    schedule 27.05.2020    source sumber

Jawaban (3)


arrow_upward
0
arrow_downward

.t2 > tbody memilih <tbody> elemen yang induknya adalah elemen kelas .t2.

tbody > tr memilih semua <tr> elemen yang induknya adalah elemen <tbody>.

tr > th memilih semua <th> elemen yang induknya adalah elemen <tr>.

tr > td memilih semua elemen <td> yang induknya adalah elemen <tr>.

Meskipun Anda belum mengkodekan <tbody> secara eksplisit, browser akan menambahkan <tbody> saat menampilkannya.

masukkan deskripsi gambar di sini

For more info on CSS selectors, please refer to here. 

<style>
  body {
    background-color: skyblue;
  }
  
  .t2 > tbody > tr > th,
  .t2 > tbody > tr > td {
    border: 1px solid white;
  }
</style>

<table class="t2">
  <tr>
    <th>Column 1</th>

  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>

  </tr>


</table>

person yinsweet    schedule 27.05.2020
comment
Wow, menarik sekali cara kerjanya ‹tbody›. Lucu sekali Anda membagikan tautan ke W3school karena sebelum saya mengajukan pertanyaan, saya berada di halaman tersebut untuk mencoba mencari tahu; itulah sebabnya saya sampai pada pemahaman saya yang terbatas tentang referensi elemen induk dan anak dalam gaya. Terima kasih yinsweet, kodenya berfungsi dengan baik dan saya menantikan untuk mencoba hal-hal baru dengan sedikit pengetahuan baru ini! - person Tugboat; 27.05.2020

arrow_upward
0
arrow_downward

Menggunakan penyeleksi relasional (Yang bergantung pada urutan elemen pada halaman) sangat tidak disarankan karena mudah rusak karena perubahan tata letak atau penambahan elemen halaman baru. Anda ingin menambahkan ID unik atau kelas khusus sehingga perubahan di masa mendatang tidak merusak pekerjaan Anda sebelumnya.

person Milo Todt    schedule 27.05.2020
comment
Pemilih relasional didasarkan pada kelas yang unik pada tabel tersebut. Saya hanya ingin efisien dengan kode saya jadi saya tidak membuat id untuk setiap elemen. Terima kasih telah menanggapi dan menawarkan kebijaksanaan Anda Milo! Saya menghargai umpan baliknya. - person Tugboat; 27.05.2020

arrow_upward
0
arrow_downward

Sejauh yang saya ketahui, tr tidak menggunakan gaya batas tanpa menggunakan keruntuhan batas. Lihat di sini: Mengapa TR tidak mengambil gaya?

Selain itu, pemilih > di CSS hanya berlaku untuk anak langsung dari gaya indikasi. Karena td dan th adalah anak dari elemen tr, mereka tidak diambil. Anda mungkin ingin menggunakan:

.t2 td, th{
  border: 1px solid white;
}

sebaliknya, yang seharusnya menerapkan gaya tersebut ke turunan .t2 yang disarangkan juga.

person Jack Parkinson    schedule 27.05.2020
comment
Terima kasih telah berbagi pengalaman Anda dan menambahkan tautan sehingga saya dapat terus mendidik diri saya sendiri tentang subjek ini! Saya jelas baru dan sangat menghargai bantuannya. - person Tugboat; 27.05.2020