Apa artinya ketika aturan CSS berwarna abu-abu di inspektur elemen Chrome?

Saya memeriksa h2elemen pada halaman web menggunakan inspektur elemen Google Chrome dan beberapa aturan CSS - yang tampaknya diterapkan - berwarna abu-abu. Tampaknya pemogokan menunjukkan bahwa aturan telah ditimpa, tetapi apa artinya ketika sebuah gaya berwarna abu-abu?

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

1. itu adalah aturan / properti default yang diterapkan browser, yang mencakup properti tangan pendek yang default.
2. 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

Panel hanya berisi properti dari aturan yang langsung berlaku untuk elemen yang dipilih. Untuk menampilkan properti yang diwarisi tambahan, aktifkan kotak centang Perlihatkan warisan. Properti seperti itu akan ditampilkan dalam font yang redup.

Contoh langsung: periksa elemen yang mengandung teks "Halo, dunia!"

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

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: blueberwarna abu-abu? Karena itu bagian dari seperangkat aturan yang memiliki setidaknya satu gaya yang dapat diwariskan. Gaya bawaan itutext-indent: 1em

background-color:bluebukan bawaan tetapi bagian dari set aturan yang berisi text-indent: 1emyang 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.

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.

Ini berarti aturan telah diganti dengan aturan lain dengan prioritas lebih tinggi. Misalnya stylesheet dengan:

h2 {
  color: red;
}
h2 {
  color: blue;
}

Inspektur akan menunjukkan aturan color:red;berwarna abu-abu dan color: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).

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.

Versi baru pengembang chrome menunjukkan dari mana ia diwarisi.

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.