Bagaimana untuk Mengatasi Isu Kekhususan CSS dalam Gaya Sebaris?

Keutamaan CSS: Mengatasi Kekhususan

Dalam halaman web yang diberikan, gaya sebaris untuk pelapik kiri sedang ditindih oleh helaian gaya yang dirujuk. Isu ini timbul disebabkan oleh perbezaan dalam kekhususan kedua-dua gaya.

Menentukan peraturan dalam CSS dilakukan oleh pemilih, yang menentukan elemen yang digunakan oleh peraturan itu. Kekhususan pemilih menentukan keutamaannya, dengan peraturan kekhususan yang lebih tinggi diutamakan daripada peraturan yang lebih rendah.

Dalam contoh ini, lembaran gaya yang dirujuk mengandungi peraturan ".rightColumn {margin: 0; padding: 0; }" dengan pemilih ".rightColumn ". Pemilih ini memadankan mana-mana elemen dalam elemen dengan ID "Lajur kanan". Masalah timbul kerana gaya untuk "td" dalam gaya sebaris digunakan pada mana-mana elemen sel jadual, tanpa mengira elemen induknya.

Untuk menyelesaikannya, terdapat dua pilihan:

Menggunakan Kekhususan:

Tingkatkan kekhususan gaya sebaris untuk "td" dengan menambahkan pemilih kekhususan yang lebih tinggi, seperti kelas atau ID. Contohnya:

<pre class="brush:php;toolbar:false"><style type="text/css">
td#myUnpaddedTable {
    padding-left:10px;
} 
</style>

Dalam contoh ini, kekhususan pemilih "#myUnpaddedTable" (0101) adalah lebih tinggi daripada ".rightColumn *" (0010), menjadikan gaya sebaris lebih khusus.

Menggunakan !important:

Menambah "!penting" pada gaya sebaris memaksa penyemak imbas untuk mengutamakannya berbanding gaya lain. Pendekatan ini harus dielakkan kerana ia boleh menyebabkan kekeliruan dalam lembaran gaya yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Isu Kekhususan CSS dalam Gaya Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!