Alat Pengembang Chrome: Cara mengetahui apa yang mengesampingkan aturan CSS?

196

Yah, ini sangat mudah. Jika Alat Pengembang Chrome menunjukkan kepada saya bahwa suatu style ditimpa, bagaimana cara melihat apa aturan CSS yang menimpanya?

Saya ingin tahu apakah ada sesuatu seperti "Tunjukkan padaku apa yang menimpa ini" .

OBS: Tolong, jangan arahkan saya ke Firebug.

— Ramon K.
sumber

Alat Pengembang Chrome juga menunjukkan kepada Anda aturan utama

— Zoltan Toth

Jawaban:

283

Gunakan panel Computed Style dari inspektur elemen. Perluas properti yang menarik untuk melihat daftar aturan yang berlaku, dan mana yang dimenangkan.

Tangkapan layar Chrome

— josh3736
sumber

Bagi saya tab yang dihitung terbuka secara default dan karenanya tidak terdaftar sebagai tab, seharusnya memiliki tajuk 'Dihitung', jika tidak, Anda bisa mencari waktu yang lama.

— MrFox

Tekniknya sedikit berubah karena Chrome telah maju. Alih-alih 'Perluas properti yang menarik' klik spy-glass di sebelah properti dan itu akan menunjukkan gaya yang dimenangkan kembali di tab Gaya.

— intotecho

@intotecho: Chrome 47 telah memulihkan ekspansi pada tab Dihitung sejak perubahan kaca pembesar menghisap. crbug.com/496263

— josh3736

bagaimana jika SEMUA dari mereka dibatalkan? Mungkin karena skrip? Bagaimana Anda mengetahui siapa yang melakukannya?

— darkgaze

Itu masih ada sebagai tab "Dihitung" pada panel Elemen.

— josh3736

Anda hanya dapat melihat orang-orang dengan nama yang sama yang tidak dicoret, ingat daftar itu penting.

Atau Anda dapat melihat gaya yang dihitung. Mereka akan menjadi gaya yang benar-benar diterapkan.

— pengguna1902091
sumber

crtrl + shift + c dan periksa elemen. Kemudian temukan gaya tanpa garis melaluinya, dalam kotak di sudut kanan bawah.

override dalam kebanyakan kasus di atas (dan tanpa garis melaluinya, karena gaya ini adalah yang "menang").

— Peter Rasmussen
sumber

Ini tidak terjadi ketika gaya ditandai sebagai penting!

— JCorriveau