Mengapakah Gaya Sebaris Saya Ditindih oleh Lembaran Gaya Saya?

Keutamaan CSS: Mengapa Gaya Sebaris Ditimpa

Dalam CSS, gaya digunakan pada elemen berdasarkan keutamaan peraturannya. Apabila berbilang peraturan menyasarkan elemen yang sama, peraturan yang mempunyai keutamaan tertinggi akan berkuat kuasa.

Dalam contoh yang disediakan, anda mempunyai gaya sebaris yang menetapkan padding-left: 10px untuk elemen td dalam jadual dengan lajur kanan ID. Walau bagaimanapun, gaya daripada helaian gaya yang dirujuk menetapkan margin dan padding kepada 0 untuk semua elemen dalam kelas .rightColumn. Isunya ialah gaya daripada helaian gaya yang dirujuk mempunyai keutamaan yang lebih tinggi, menyebabkan gaya sebaris ditindih.

Mengira Kekhususan

Keutamaan CSS ditentukan oleh kekhususan peraturan. Kekhususan dikira berdasarkan kriteria berikut:

1. Pengisytiharan gaya sebaris menyumbang 1 mata kepada kekhususan (a = 1).
2. Setiap ID dalam pemilih menyumbang 10 mata (b = n ).
3. Setiap kelas atau pseudo-class dalam pemilih menyumbang 1 mata (c = n).
4. Setiap elemen atau pseudo-element dalam pemilih menyumbang 1 mata (d = n).

Sebagai contoh, peraturan dengan pemilih .rightColumn * mempunyai kekhususan 0010 (a = 0, b = 0, c = 1, d = 0), manakala peraturan dengan pemilih td mempunyai kekhususan 0001 (a = 0, b = 0, c = 0, d = 1). Memandangkan 0010 lebih besar daripada 0001, peraturan daripada helaian gaya yang dirujuk mempunyai keutamaan yang lebih tinggi.

Menyelesaikan Isu

Untuk menyelesaikan isu ini dan menggunakan gaya sebaris, anda perlu dua pilihan:

1. Gunakan !penting: Anda boleh menambah !penting pada gaya sebaris untuk memaksa kepentingannya yang lebih tinggi. Walau bagaimanapun, pendekatan ini boleh menjadi sukar untuk dikekalkan dan harus dielakkan jika boleh.
2. Tingkatkan kekhususan peraturan: Anda boleh menambah pemilih yang lebih khusus pada gaya sebaris untuk meningkatkan kekhususannya. Sebagai contoh, anda boleh menambah nama kelas pada sel jadual dan menggayakannya menggunakan pemilih seperti .rightColumn .myUnpaddedTable. Dengan cara ini, kekhususan gaya sebaris menjadi 0011, yang lebih tinggi daripada kekhususan peraturan daripada helaian gaya yang dirujuk (0010).

Atas ialah kandungan terperinci Mengapakah Gaya Sebaris Saya Ditindih oleh Lembaran Gaya Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!