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
2
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
1
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
3
@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
7

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
2

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
4
Ini tidak terjadi ketika gaya ditandai sebagai penting!
JCorriveau