Bagaimanakah saya boleh mengatasi peraturan CSS yang bercanggah daripada helaian gaya luaran apabila menggunakan penggayaan sebaris?

Keutamaan CSS: Memahami Kekhususan

Dalam senario ini, padding gaya sebaris-kiri: 10px digunakan pada sel jadual dalam IDColumn kanan sedang ditindih oleh peraturan yang bercanggah daripada lembaran gaya luaran. Lembaran gaya yang dirujuk mengandungi peraturan yang menetapkan margin dan padding kepada 0 untuk semua elemen dalam kelas RightColumn.

Konsep Kekhususan CSS

Untuk menentukan peraturan CSS yang diutamakan, konsep yang dipanggil kekhususan mula bermain. Kekhususan ialah ukuran seberapa spesifik pemilih peraturan CSS. Lebih spesifik pemilih, lebih tinggi kekhususannya.

Mengira Kekhususan

CSS 2.1 mentakrifkan peraturan berikut untuk mengira kekhususan:

• Kira 1 jika pengisytiharan ialah daripada atribut gaya (penggayaan sebaris) dan 0 jika ia bukan daripada atribut gaya.
• Kira bilangan atribut ID dalam pemilih.
• Kira bilangan atribut lain dan kelas pseudo dalam pemilih.
• Kira bilangan nama elemen dan unsur pseudo dalam pemilih.

Empat nilai ini digabungkan dalam bentuk a-b-c-d, dengan a ialah nilai daripada peraturan pertama, b daripada peraturan kedua, dan seterusnya. Semakin tinggi nilai berangka, semakin tinggi kekhususan.

Menggunakan Kekhususan pada Kes Diberi

Dalam kes ini, gaya sebaris mempunyai kekhususan 0001 (tiada atribut ID, tiada atribut lain atau kelas pseudo, satu nama unsur). Peraturan bercanggah daripada helaian gaya luaran mempunyai kekhususan 0010 (tiada atribut ID, satu atribut lain atau kelas pseudo, tiada nama unsur).

Memandangkan 0010 lebih tinggi daripada 0001, peraturan daripada helaian gaya luaran mengambil keutamaan dan mengatasi gaya sebaris.

Dua Penyelesaian untuk Mengatasi Isu Kekhususan

Untuk mengatasi peraturan yang bercanggah, terdapat dua pilihan utama:

1. Gunakan !important: Menambah !important pada gaya sebaris akan menjadikannya lebih penting dan mengatasi peraturan yang bercanggah. Walau bagaimanapun, ini harus digunakan dengan berhati-hati kerana ia boleh menimbulkan kekeliruan.
2. Gunakan Pemilih Kekhususan Tinggi: Ubah suai gaya sebaris dengan menambahkan kelas atau ID pada sel jadual yang dipersoalkan. Ini akan membuat peraturan baharu dengan kekhususan yang lebih tinggi daripada peraturan bercanggah daripada helaian gaya luaran.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengatasi peraturan CSS yang bercanggah daripada helaian gaya luaran apabila menggunakan penggayaan sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!