* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Berlin Sans FB';    
}

Saya telah meletakkan yang di atas di bagian atas CSS saya dan

.table-dark {
    font-family: 'Times New Roman', Times, serif !important;
}

Ini di atas satu di akhir.

Saya menggunakan bootstrap.

Di sini hanya font-family: 'Berlin Sans FB'; yang digunakan oleh browser tetapi bukan yang terakhir, yaitu font-family: 'Times New Roman', Times, serif !important;

Saya ingin menggunakan yang terakhir. Sekarang, apa yang harus dilakukan?

0
Sayan Dasgupta 12 Mei 2021, 21:41

4 jawaban

Jawaban Terbaik

CSS dirender saat halaman dimuat, sehingga akan menggantikan gaya ".table-dark" karena masih ada beberapa elemen setelah div ".table-dark".

Coba hindari menggunakan * untuk mengubah gaya, sebagai gantinya Anda bisa menggunakan "body" atau "main".

Lihat cuplikan di bawah ini:

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Berlin Sans FB';    
}
.table-dark{
    font-family: 'Times New Roman', Times, serif !important;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <main>
      <div>header: Berlin Sans FB Text</div>
      <div class="table-dark">
          'Times New Roman' Text
      </div>

    </main>
</body>
</html>
0
StevenXXCCC 12 Mei 2021, 18:55

Anda menabrak inti dari cascading, dan alasan banyak orang menghindari pemilih wildcard.

Selektor wildcard berlaku untuk semua objek, dan tidak menerapkan gaya sebagai warisan. Anda mungkin berasumsi bahwa *{} benar-benar memengaruhi elemen <html> atau <body>, tetapi sebenarnya ini berlaku langsung ke SEMUA elemen. Karena itu, *{} memiliki spesifisitas yang lebih tinggi daripada gaya yang diwarisi dari induk elemen.

.table-dark adalah kelas penampung, karena ini, Anda mungkin memiliki elemen <tbody>, <tr>, dan <td> di antara itu dan konten. Ini menghentikan elemen <table> dari meneruskan fontnya. Pikirkan seperti ini:

body {
  font-family: helvetica;
}
table {
  font-family: arial;
}
<body> <!-- helvetica -->
  <div> <!-- inherited helvetica -->
    <table> <!-- arial -->
      <tbody> <!-- inherited arial -->
        <tr> <!-- inherited arial -->
          <td> <!-- inherited arial -->
            content <!-- inherited arial -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Di sini, <body> meneruskan Helvetica ke <div>, namun TIDAK meneruskannya ke tabel, karena tabel didefinisikan dalam CSS. Namun, apa yang telah Anda lakukan ditetapkan ke SEMUA elemen, seperti ini:

* {
  font-family: helvetica;
}
table {
  font-family: arial;
}
<body> <!-- helvetica -->
  <div> <!-- helvetica -->
    <table> <!-- arial -->
      <tbody> <!-- helvetica -->
        <tr> <!-- helvetica -->
          <td> <!-- helvetica -->
            content <!-- helvetica -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
0
Clayton Engle 12 Mei 2021, 19:31

Elemen turunan tidak mewarisi font-family secara default.

Ini akan berfungsi jika Anda memiliki teks langsung di dalam .table-dark, jika teks Anda dibungkus oleh elemen lain (misalnya tag p), aturan css * akan diutamakan, dan Anda akan tidak perlu !important juga.

Membuat sampel di sini,

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica';    
}

.table-dark {
  font-family: 'Times New Roman';
}
<div class="table-dark">
  This is Times New Roman
  <p> This is Helvetica </p>
</div>

Anda dapat membaca lebih lanjut tentang kekhususan CSS di sini.

0
painotpi 12 Mei 2021, 19:15

Elemen Anda tidak akan mewarisi properti font-family karena Anda telah memberinya properti font-family menggunakan pemilih universal.

0
Fearey 12 Mei 2021, 18:56