Terapkan Gaya CSS ke elemen anak

232

Saya ingin menerapkan gaya hanya ke tabel di dalam DIV dengan kelas tertentu:

Catatan: Saya lebih suka menggunakan pemilih-css untuk elemen anak-anak.

Mengapa # 1 berfungsi dan # 2 tidak?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

Apa yang saya lakukan salah?

css css-selectors

— roman m
sumber

Jangan lupa bahwa pemilih>, + dan [] tidak tersedia untuk IE6 dan di bawahnya.

— Erick

309

Kode ini " div.test th, td, caption {padding:40px 100px 40px 50px;}" menerapkan aturan untuk semua thelemen yang terkandung oleh divelemen dengan kelas yang dinamai test, selain semua td elemen dan semua caption elemen.

Ini tidak sama dengan "semua td, thdan captionelemen yang terkandung oleh divelemen dengan kelas test". Untuk mencapai itu, Anda perlu mengubah penyeleksi Anda:

' >' tidak sepenuhnya didukung oleh beberapa browser yang lebih lama (Saya sedang melihat Anda, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— Ken Browning
sumber

apakah ada jalan lain menulis div.test 3 kali lipat?

— roman m

2

@ rm Tidak. Tidak ada bersarang aturan atau 'dengan' jenis pengelompokan

— sblundy

2

@romanm Ada jalan lain menulis 'div.test' 3 kali lipat! melihat ke dalam menggunakan kerangka kerja sass atau kurang untuk menulis file css! :)

— gillyb

@romanm - lihat jawaban saya, menggunakan * untuk menargetkan semua anak untuk mencegah pengulangan, atau menggunakan .class> * untuk semua anak langsung. Itu tidak sulit.

— Richard Edwards

Petunjuk tentang tidak didukung di IE sangat membantu, saya mencoba untuk membuat beberapa CSS berfungsi untuk DTCoreText di iOS tetapi tidak berfungsi, parser mereka lebih buruk daripada IE.

— Sirene

123

.test * {padding: 40px 100px 40px 50px;}

— Richard Edwards
sumber

11

Perhatikan bahwa, * di sini berarti Anda tidak dapat menimpanya dengan aturan lain yang lebih spesifik karena .test *akan menjadi aturan paling spesifik untuk setiap elemen anak. Dengan kata lain, perlu diingat bahwa apa pun yang Anda masukkan ke dalam .test *tidak dapat ditimpa oleh aturan css yang lebih spesifik karena test *ini adalah aturan yang paling spesifik.

— vadasambar

81

The > pemilih cocok anak langsung saja, tidak keturunan.

Kamu ingin

div.test th, td, caption {}

atau lebih mungkin

div.test th, div.test td, div.test caption {}

Edit:

Yang pertama mengatakan

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

Sedangkan yang kedua mengatakan

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

Dalam aslinya Anda div.test > thmengatakan any <th> which is a **direct** child of <div class="test">, yang berarti itu akan cocok<div class="test"><th>this</th></div> tetapi tidak akan cocok<div class="test"><table><th>this</th></table></div>

— Greg
sumber

fwiw, karena td dan keterangan dalam pemilih itu adalah "bodoh" - mereka akan cocok dengan yang diberikan tanpa keterangan untuk div.test. Targetting buta semacam itu jarang seperti yang Anda inginkan di CSS untuk apa pun kecuali gaya yang paling umum.

— annakata

@annakata: itu adalah bagian dari kerangka kerja css, saya mencoba menerapkannya secara lokal

— roman m

10

Jika Anda ingin menambahkan gaya di semua anak dan tidak ada spesifikasi untuk tag html kemudian gunakan.

Tag induk div.parent

tag anak dalam div.parent sejenisnya <a>, <input>, <label>dll

kode: div.parent * {color: #045123!important;}

Anda juga dapat menghapus yang penting, itu tidak diperlukan

— pengguna1369111
sumber

7

Berikut adalah beberapa kode yang baru saya tulis. Saya pikir itu memberikan penjelasan dasar tentang menggabungkan nama kelas / ID dengan pseudoclasses.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

Luaskan cuplikan

— Menandai
sumber

CSS tidak mengizinkan komentar baris tunggal seperti //. Lihat stackoverflow.com/questions/4656546/…

— Volker E.

4

div.test td, div.test caption, div.test th

bekerja untukku.

Selector anak> tidak berfungsi di IE6.

— Traingamer
sumber

2

Sejauh yang saya tahu ini:

div[class=yourclass] table {  your style here; }

atau dalam kasus Anda bahkan ini:

div.yourclass table { your style here; }

(tapi ini akan berfungsi untuk elemen yourclassyang mungkin bukan divs) hanya akan memengaruhi tabel di dalamnya yourclass. Dan, seperti kata Ken,> tidak didukung di mana-mana (dan div[class=yourclass]juga, jadi gunakan notasi titik untuk kelas).

— tunnuz
sumber

0

Kode ini dapat melakukan triknya juga, menggunakan sintaks SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
sumber