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

248

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?

Rob Sobers
sumber

Jawaban:

95

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.

Michael Coleman
sumber
10
Pernyataan "aturan yang diwariskan, tetapi tidak diterapkan , mereka akan muncul sebagai teks abu-abu / redup" tidak benar. Jika tidak diterapkan, mereka akan dicekik. Saya telah memperbarui jawaban saya dengan tangkapan layar dan contoh langsung.
Rob Sobers
10
Ini adalah jawaban yang benar!!! Kalimat kuncinya adalah ... "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 abu-abu / redup."
Niko Bellic
Ini jelas jawaban yang tepat. Jika properti berwarna abu-abu muncul di dalam bagian yang mengatakan "Diwarisi dari [pemilih]", maka itu adalah properti yang tidak dapat diwariskan yang tidak diterapkan ke elemen saat ini. Setiap properti yang dicoret telah diganti oleh gaya yang lebih spesifik.
onlynone
1
Jika aturan dikaburkan ketika mereka tidak dapat diwariskan, mengapa elemen div saya telah mengolesi aturan 'lebar'? Apakah lebar tidak bisa diwariskan? Ngomong-ngomong, aku menanyakan hal ini dengan serius.
moosefetcher
1
... Jadi jika Anda melihat Chrome mengeluarkan aturan css yang sangat banyak diterapkan - di mana Anda dapat menghapus centangnya (atau mengubah nilainya) dan melihat perubahan yang sesuai pada halaman - mungkin saja aturan tersebut memengaruhi elemen tersebut. tetapi tidak diterapkan pada elemen itu secara khusus, tetapi untuk orangtua.
Ben Wheeler
82

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.

aturan abu-abu diwariskan dari leluhur

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

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}
<div id="foo">Hello, world!</div>

Rob Sobers
sumber
13
@Rob Untuk lebih tepatnya, ketika gaya ditampilkan berwarna abu-abu, itu berarti telah diwarisi dari beberapa elemen mencakup lainnya tetapi tidak berlaku untuk elemen yang dipilih . Dari dokumentasi: "Panel hanya berisi properti dari aturan yang langsung berlaku untuk elemen yang dipilih. Untuk menampilkan properti yang diwarisi tambahan, aktifkan kotak centang Tampilkan yang diwarisi. Properti tersebut akan ditampilkan dalam font yang redup."
drkvogel
2
@RobSobers Sayangnya, saya tidak berpikir contoh Anda menunjukkan warisan. Di mana leluhur leluhur tempat div diturunkan? Jika Anda menggulir ke bawah di panel Styels di Chrome, Anda akan melihat bagian berjudul "Diwariskan dari ..." Apa arti aturan yang diklik di sana? Bisakah Anda memasukkannya ke dalam contoh?
Niko Bellic
8
Saya tidak mengerti mengapa jawaban ini adalah a. ditandai sebagai jawaban terbaik dan b. memiliki begitu banyak upvotes. Jelas salah. Margin bukan properti yang dapat diwarisi ( stackoverflow.com/a/5612360/24267 ) Jawaban Michael Coleman adalah yang benar. Oh, maksudmu bukan diwarisi dari unsur leluhur, maksudmu ... Aku tidak yakin apa maksudmu sebenarnya. Bagaimanapun, jawaban ini tidak benar pada tahun 2015, dengan Chrome 46.
mhenry1384
3
Jelas suara untuk beberapa MS Paint magic dengan panah, dan efek bubble shadow. downvoted sebagai salah.
David
2
@ mhenry1384 "a" mudah dijelaskan: karena ditulis oleh orang yang mengajukan pertanyaan.
Andrew Grimm
27

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 ...

HTML

Panel Gaya di Chrome terlihat seperti ini ketika Anda memilih elemen p ...

Panel Gaya

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.

Niko Bellic
sumber
1
Ini adalah jawaban terbaik, karena memberikan demo sederhana. Buka URL itu di tab baru dan gunakan Alat Pengembang Chrome untuk memilih berbagai divs dan p. Anda akan melihat bahwa background-colortidak berwarna abu-abu untuk div#two. Tetapi background-colorberwarna abu-abu untuk div#threedan p.
wisbucky
penjelasan hebat
Dirk Boer
10

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.

AaronLS
sumber
Ini masalah saya. Terima kasih!
Chuck Le Butt
5

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).

tcooc
sumber
Saya baru saja menguji ini dan saya pikir itu tidak benar. Dalam kasus di mana aturan ditimpa, akan ada pemogokan (seperti pertanyaan saya menunjukkan). Lihat: yfrog.com/f/j3fooep
Rob Sobers
@Rob: memiliki mixup sejak devtools tidak dimulai. Saya menjalankannya, dan mengedit jawaban saya dengan jawaban teruji saya .
tcooc
Saya tidak sepenuhnya yakin itu benar juga; aturan yang pudar adalah yang telah saya atur di style sheet saya sendiri (mis. font-size: 20px;)
Rob Sobers
1

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.

pengguna2528531
sumber
0

masukkan deskripsi gambar di sini

Versi baru pengembang chrome menunjukkan dari mana ia diwarisi.

Jmojico
sumber
0

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.

davidreedernst
sumber