Bagi saya jawaban saat ini tidak menjelaskan masalah ini sepenuhnya, jadi saya menambahkan jawaban ini yang semoga bermanfaat bagi orang lain.
Teks berwarna abu-abu / redup, bisa berarti juga
- itu adalah aturan / properti default yang diterapkan browser, yang mencakup properti tangan pendek yang default.
- Ini melibatkan pewarisan yang sedikit lebih rumit.
Warisan
Catatan: Panel "style" alat dev Chrome akan menampilkan set aturan, karena satu atau lebih aturan dari set diterapkan ke node DOM yang saat ini dipilih. Saya kira, demi kelengkapan, perangkat dev menunjukkan semua aturan dari set itu, apakah itu diterapkan atau tidak.
Dalam kasus di mana aturan diterapkan ke elemen yang dipilih saat ini karena warisan (yaitu aturan diterapkan ke leluhur, dan elemen yang dipilih mewarisinya), chrome akan kembali menampilkan seluruh set aturan.
Aturan yang diterapkan pada elemen yang dipilih saat ini muncul dalam teks normal.
Jika ada aturan di set itu tetapi tidak diterapkan karena itu adalah properti yang tidak dapat diwariskan (misalnya warna latar belakang), itu akan muncul sebagai teks yang diklik / redup.
di sini adalah artikel yang memberikan penjelasan yang baik - (Catatan: item yang relevan ada di bagian bawah artikel - gambar 21 - sayangnya bagian yang relevan tidak memiliki judul) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033
Kutipan dari artikel
Ini [skenario warisan] kadang-kadang dapat membuat sedikit kebingungan, karena properti tangan pendek default; Gambar 21 mengilustrasikan properti tangan pendek default dari properti font bersama dengan properti non-warisan. Ketahuilah konteks yang Anda lihat saat memeriksa elemen.
Ini berarti bahwa aturan telah diwarisi, tetapi tidak berlaku untuk elemen yang dipilih:
http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style
Contoh langsung: periksa elemen yang mengandung teks "Halo, dunia!"
sumber
Michael Coleman memiliki jawaban yang tepat. Saya hanya ingin menambahkan gambar sederhana untuk digunakan. Tautan yang ia sertakan memiliki contoh sederhana ini: http://commandlinefanatic.com/art033ex4.html
HTML / DOM terlihat seperti ini ...
Panel Gaya di Chrome terlihat seperti ini ketika Anda memilih elemen p ...
Seperti yang Anda lihat, elemen p mewarisi dari leluhurnya (div). Jadi mengapa gaya itu
background-color: blue
berwarna abu-abu? Karena itu bagian dari seperangkat aturan yang memiliki setidaknya satu gaya yang dapat diwariskan. Gaya bawaan itutext-indent: 1em
background-color:blue
bukan bawaan tetapi bagian dari set aturan yang berisitext-indent: 1em
yang dapat diwarisi dan pengembang Chrome ingin lengkap saat menampilkan set aturan. Namun, untuk membedakan antara gaya dalam set aturan yang dapat diwarisi dari gaya yang tidak, gaya yang tidak dapat diwariskan dihitamkan.sumber
div
s danp
. Anda akan melihat bahwabackground-color
tidak berwarna abu-abu untukdiv#two
. Tetapibackground-color
berwarna abu-abu untukdiv#three
danp
.Ini juga terjadi jika Anda menambahkan gaya melalui inspektur, tetapi gaya baru itu tidak berlaku untuk elemen yang Anda pilih. Biasanya gaya yang ditampilkan hanya yang untuk elemen yang dipilih, jadi warna abu-abu menunjukkan bahwa gaya yang baru saja Anda tambahkan tidak memilih elemen yang memiliki fokus di navigator DOM.
sumber
Ini berarti aturan telah diganti dengan aturan lain dengan prioritas lebih tinggi. Misalnya stylesheet dengan:
Inspektur akan menunjukkan aturan
color:red;
berwarna abu-abu dancolor:blue;
normal.Baca tentang pewarisan CSS untuk mempelajari aturan mana yang diwarisi / memiliki prioritas lebih tinggi.
EDIT:
Mixup: aturan abu-abu adalah aturan tidak disetel, yang menggunakan stylesheet default khusus yang diterapkan ke semua elemen (aturan yang membuat elemen dapat diulang, karena semua gaya harus memiliki nilai).
sumber
font-size: 20px;
)Saat menggunakan webpack, aturan css atau properti apa pun yang telah diubah dalam kode sumber berwarna abu-abu saat halaman dimuat ulang setelah dibangun kembali. Ini sangat menjengkelkan dan memaksa saya untuk memuat ulang halaman setiap saat.
sumber
Versi baru pengembang chrome menunjukkan dari mana ia diwarisi.
sumber
Saya menjawab lama setelah pertanyaan sudah memiliki banyak jawaban yang benar karena saya menemukan kasus berbeda dengan memiliki blok kode CSS yang diklik dan tidak dapat diedit di Chome DevTools: Blok yang dimaksud berisi karakter U + 200B ZERO WIDTH SPACE . Setelah saya menemukan dan menghapusnya, saya dapat mengedit blok di Chrome DevTools lagi. Mungkin ini terjadi dengan karakter non-ascii lainnya, saya belum mencoba untuk mengetahuinya.
sumber