หมายความว่าอย่างไรเมื่อกฎ CSS เป็นสีเทาในตัวตรวจสอบองค์ประกอบของ Chrome

ฉันกำลังตรวจสอบh2องค์ประกอบบนหน้าเว็บโดยใช้ตัวตรวจสอบองค์ประกอบของ Google Chrome และกฎ CSS บางอย่างซึ่งดูเหมือนว่าจะนำไปใช้จะเป็นสีเทา ดูเหมือนว่าการหยุดงานประท้วงเป็นการระบุว่ากฎนั้นถูกเขียนทับ แต่มันหมายความว่าอย่างไรเมื่อสไตล์เป็นสีเทา?

สำหรับฉันคำตอบปัจจุบันไม่ได้อธิบายปัญหาอย่างเต็มที่เพียงพอดังนั้นฉันจึงเพิ่มคำตอบนี้ซึ่งหวังว่าอาจเป็นประโยชน์กับผู้อื่น

ข้อความสีเทาหรือสีจางอาจมีความหมายเช่นกัน

1. มันเป็นกฎ / คุณสมบัติเริ่มต้นที่เบราว์เซอร์ใช้ซึ่งรวมถึงคุณสมบัติระยะสั้นที่ผิดนัด
2. มันเกี่ยวข้องกับการสืบทอดซึ่งซับซ้อนกว่าเล็กน้อย

มรดก

หมายเหตุ: แผงเครื่องมือ "สไตล์" ของ Chrome dev จะแสดงชุดกฎเนื่องจากกฎอย่างน้อยหนึ่งรายการจากชุดจะถูกนำไปใช้กับโหนด DOM ที่เลือกในปัจจุบัน ฉันเดาว่าเครื่องมือ dev จะแสดงกฎทั้งหมดจากชุดนั้นไม่ว่าจะถูกนำไปใช้หรือไม่ก็ตาม

ในกรณีที่กฎถูกนำไปใช้กับองค์ประกอบที่เลือกในปัจจุบันเนื่องจากการสืบทอด (เช่นกฎถูกนำไปใช้กับบรรพบุรุษและองค์ประกอบที่เลือกได้รับมรดกมา) โครเมี่ยมจะแสดงชุดกฎทั้งหมดอีกครั้ง

กฎที่ใช้กับองค์ประกอบที่เลือกในปัจจุบันจะปรากฏในข้อความปกติ

หากมีกฎอยู่ในชุดนั้น แต่ไม่ได้ใช้เพราะเป็นคุณสมบัติที่ไม่สามารถสืบทอดได้ (เช่นสีพื้นหลัง) มันจะปรากฏเป็นข้อความสีเทา / จาง

นี่คือบทความที่ให้คำอธิบายที่ดี - (หมายเหตุ: รายการที่เกี่ยวข้องอยู่ที่ด้านล่างของบทความ - รูปที่ 21 - น่าเสียดายที่ส่วนที่เกี่ยวข้องไม่มีหัวข้อ) - http://commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

ตัดตอนมาจากบทความ

[สถานการณ์การสืบทอด] ในบางครั้งสามารถสร้างความสับสนเล็กน้อยเนื่องจากคุณสมบัติระยะสั้นที่ผิดนัด รูปที่ 21 แสดงให้เห็นถึงคุณสมบัติระยะสั้นที่เป็นค่าเริ่มต้นของคุณสมบัติแบบอักษรพร้อมกับคุณสมบัติที่ไม่สืบทอด แค่ระวังบริบทที่คุณกำลังดูเมื่อตรวจสอบองค์ประกอบ

หมายความว่ากฎได้รับการสืบทอดมาแล้ว แต่ไม่สามารถใช้ได้กับองค์ประกอบที่เลือก:

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

บานหน้าต่างมีคุณสมบัติเฉพาะจากกฎที่ใช้โดยตรงกับองค์ประกอบที่เลือก เพื่อแสดงคุณสมบัติที่สืบทอดเพิ่มเติมให้เปิดใช้งานช่องทำเครื่องหมายแสดงการสืบทอด คุณสมบัติดังกล่าวจะปรากฏในแบบอักษรจาง

ตัวอย่างสด: ตรวจสอบองค์ประกอบที่มีข้อความ "Hello, world!"

div { 
  margin: 0;
}

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

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

Michael Coleman มีคำตอบที่ถูกต้อง ฉันแค่ต้องการเพิ่มภาพง่าย ๆ เพื่อให้เข้ากับมัน ลิงก์ที่เขารวมมีตัวอย่างง่ายๆนี้: http://commandlinefanatic.com/art033ex4.html

HTML / DOM มีลักษณะเช่นนี้ ...

บานหน้าต่างสไตล์ใน Chrome มีลักษณะเช่นนี้เมื่อคุณเลือกองค์ประกอบ p ...

อย่างที่คุณเห็นองค์ประกอบของ p สืบทอดมาจากบรรพบุรุษ (divs) ทำไมสไตล์จึงเป็นbackground-color: blueสีเทา เนื่องจากเป็นส่วนหนึ่งของชุดกฎที่มีสไตล์อย่างน้อยหนึ่งอย่างที่สืบทอดได้ สไตล์ที่สืบทอดได้คือtext-indent: 1em

background-color:blueไม่สามารถสืบทอดได้ แต่เป็นส่วนหนึ่งของชุดกฎที่มีtext-indent: 1emสิ่งที่สืบทอดได้และนักพัฒนาของ Chrome ต้องการให้สมบูรณ์เมื่อแสดงชุดกฎ อย่างไรก็ตามในการแยกแยะความแตกต่างระหว่างสไตล์ในชุดกฏที่สืบทอดได้จากสไตล์ที่ไม่ได้สไตล์ที่ไม่สามารถสืบทอดได้จะเป็นสีเทา

สิ่งนี้จะเกิดขึ้นหากคุณเพิ่มสไตล์ผ่านทางผู้ตรวจสอบ แต่สไตล์ใหม่นั้นไม่ได้ใช้กับองค์ประกอบที่คุณเลือก โดยปกติแล้วสไตล์ที่แสดงเป็นเพียงองค์ประกอบสำหรับองค์ประกอบที่เลือกดังนั้นสีเทาระบุว่าสไตล์ที่คุณเพิ่งเพิ่มไม่ได้เลือกองค์ประกอบที่มีโฟกัสในเนวิเกเตอร์ DOM

หมายความว่ากฎนั้นถูกแทนที่ด้วยกฎอื่นที่มีลำดับความสำคัญสูงกว่า ตัวอย่างสไตล์กับ:

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

ผู้ตรวจสอบจะแสดงกฎเป็นcolor:red;สีเทาและcolor:blue;ตามปกติ

อ่านเกี่ยวกับการสืบทอด CSSเพื่อเรียนรู้ว่ากฎใดที่สืบทอดมา / มีลำดับความสำคัญสูงกว่า

แก้ไข:

การผสม: กฎสีเทาเป็นกฎที่ไม่ได้กำหนดซึ่งใช้สไตล์ชีทเริ่มต้นพิเศษที่ใช้กับองค์ประกอบทั้งหมด (กฎที่ทำให้องค์ประกอบสามารถแสดงผลได้เนื่องจากสไตล์ทั้งหมดต้องมีค่า)

เมื่อใช้ webpack กฎ css หรือคุณสมบัติใด ๆ ที่มีการเปลี่ยนแปลงในซอร์สโค้ดจะเป็นสีเทาเมื่อเพจนั้นโหลดใหม่หลังจากการสร้างใหม่ มันน่ารำคาญจริงๆและบังคับให้ฉันโหลดหน้าซ้ำทุกครั้ง

นักพัฒนาซอฟต์แวร์ Chrome รุ่นใหม่จะแสดงตำแหน่งที่สืบทอดมา

ฉันตอบคำถามนานหลังจากที่มีอยู่แล้วมีคำตอบที่ถูกต้องจำนวนมากเพราะผมพบกรณีที่แตกต่างกันของการมีบล็อกของรหัส CSS สีเทาและไม่สามารถแก้ไขได้ใน Chome DevTools: บล็อกในคำถามที่มีตัวอักษร U + 200B ZERO ช่องว่างความกว้าง เมื่อฉันพบสิ่งเหล่านั้นและนำออกไปฉันสามารถแก้ไขบล็อกใน Chrome DevTools ได้อีกครั้ง สันนิษฐานว่าอาจเกิดขึ้นกับตัวละครที่ไม่ใช่คนอื่นเช่นกันฉันไม่ได้พยายามคิดออก