Chrome'un öğe denetçisinde bir CSS kuralı grileştiğinde ne anlama gelir?

h2Bir web sayfasındaki bir öğeyi Google Chrome'un öğe denetçisini kullanarak inceliyorum ve uygulandığı anlaşılan bazı CSS kuralları gri görünüyor. Görünüşe göre bir tersine çevirme, bir kuralın geçersiz kılındığını gösterir, ancak bir stil gri olduğunda ne anlama gelir?

Benim için şu anki cevaplar sorunu yeterince açıklamamıştı, bu yüzden umarım başkalarına faydalı olabilecek bu cevabı ekliyorum.

Gri / soluk metin, ya

1. tarayıcının uyguladığı, varsayılan kısa el özelliklerini içeren varsayılan bir kural / özelliktir.
2. Biraz daha karmaşık olan kalıtım içerir.

miras

Not: Chrome geliştirici araçları "stil" paneli bir kural kümesi görüntüler, çünkü gruptan bir veya daha fazla kural seçili olan DOM düğümüne uygulanır. Sanırım, bütünlük uğruna, dev araçları, uygulanmış olsun olmasın, bu kümedeki tüm kuralları gösterir.

Kalıtım nedeniyle seçili olan öğeye bir kuralın uygulanması durumunda (yani, kural bir ataya uygulandı ve seçilen öğe miras aldı), krom yine tüm kural kümesini görüntüler.

Seçili öğeye uygulanan kurallar normal metinde görünür.

Bu kümede bir kural varsa ancak devralınamayan bir özellik (ör. Arka plan rengi) olduğu için uygulanmazsa, gri / soluk metin olarak görünür.

İşte iyi bir açıklama veren bir makale - (Not: ilgili öğe makalenin altındadır - şekil 21 - maalesef ilgili bölümün başlığı yoktur) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

Makaleden alıntı

Bu [kalıtım senaryosu] zaman zaman biraz karışıklık yaratabilir, çünkü varsayılan kısa el özellikleri; Şekil 21, miras alınmayan özelliklerle birlikte font özelliğinin varsayılan kısa el özelliklerini gösterir. Sadece öğeleri incelerken baktığınız bağlamın farkında olun.

Bu kuralın miras alındığı, ancak seçilen öğeye uygulanamayacağı anlamına gelir:

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

Bölme, yalnızca seçili öğeye doğrudan uygulanabilen kurallardan özellikler içerir. Devralınan özellikleri ek olarak görüntülemek için Devralınanları göster onay kutusunu etkinleştirin. Bu tür özellikler soluk bir yazı tipinde görüntülenir.

Canlı örnek: "Merhaba dünya!" Metnini içeren öğeyi inceleyin.

div { 
  margin: 0;
}

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

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

Michael Coleman doğru cevabı veriyor. Ben sadece onunla birlikte gitmek için basit bir görüntü eklemek istiyorum. Eklediği bağlantı şu basit örneğe sahiptir: http://commandlinefanatic.com/art033ex4.html

HTML / DOM şöyle görünür ...

P öğesini seçtiğinizde Chrome'daki Stiller Bölmesi şöyle görünür ...

Gördüğünüz gibi, p elemanı atalarından (div) miras alır. Öyleyse stil neden background-color: bluegri görünüyor? Çünkü bu, devralınabilen en az bir stile sahip bir kural kümesinin parçası. Bu kalıtsal stiltext-indent: 1em

background-color:bluedevralınamaz, ancak devralınabilen text-indent: 1emve Chrome geliştiricileri kural kümelerini görüntülerken tamamlanmak istedikleri kural kümesinin bir parçasıdır . Ancak, kural kümesindeki kalıtsal olmayan stillerden olmayan stilleri ayırt etmek için, devralınamayan stiller grileşir.

Bu, denetçi aracılığıyla bir stil eklerseniz de oluşur, ancak bu yeni stil seçtiğiniz öğeye uygulanmaz. Genellikle gösterilen stiller yalnızca seçilen öğenin stilleridir, bu nedenle gri, az önce eklediğiniz stilin DOM gezgininde odağı olan öğeyi seçmediğini gösterir.

Bu, kuralın daha yüksek önceliğe sahip başka bir kuralla değiştirildiği anlamına gelir. Örneğin:

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

Müfettiş kuralı color:red;gri renkte ve color:blue;normalde gösterecektir .

Hangi kuralların miras alındığını / daha yüksek önceliğe sahip olduğunu öğrenmek için CSS mirasını okuyun .

DÜZENLE:

Birleştirme: Gri renkteki kurallar, tüm öğelere (tüm stillerin bir değere sahip olması gerektiğinden, öğeyi yenilenebilir yapan kurallar) uygulanan özel bir varsayılan stil sayfası kullanan ayarlanmamış kurallardır .

Web paketini kullanırken, sayfa yeniden oluşturulduktan sonra sayfa yeniden yüklendiğinde kaynak kodunda değiştirilen herhangi bir css kuralı veya özelliği grileşir. Bu gerçekten sinir bozucu ve beni her defasında sayfayı yeniden yüklemeye zorladı.

Chrome geliştiricisinin yeni sürümü, nereden devralındığını gösterir.

Soruyu zaten çok doğru cevaplar aldıktan sonra uzun süre yanıtlıyorum çünkü farklı bir CSS kodu bloğunun grileştiğini ve Chome DevTools'ta düzenlenemediğini fark ettim: Söz konusu blok U + 200B ZERO WIDTH SPACE karakterlerini içeriyordu . Bunları bulup kaldırdığımda, Chrome DevTools'ta bloğu tekrar düzenleyebilirim. Muhtemelen bu diğer ascii olmayan karakterlerde de olabilir, bunu anlamaya çalışmadım.