คุณสมบัติรูปแบบไขว้ใน devtools ของ Google Chrome หมายถึงอะไร

ขณะที่ตรวจสอบองค์ประกอบโดยใช้ devtools ของ Chrome ในแท็บองค์ประกอบแถบ 'สไตล์' ทางด้านขวาจะแสดงคุณสมบัติ CSS ที่เกี่ยวข้อง บางครั้งคุณสมบัติเหล่านี้บางส่วนจะถูกขีดฆ่า คุณสมบัติเหล่านี้หมายถึงอะไร

เมื่อคุณสมบัติ CSS แสดงเป็นแบบขีดฆ่าหมายความว่ามีการใช้สไตล์แบบข้ามออก แต่แทนที่ด้วยตัวเลือกที่เฉพาะเจาะจงมากขึ้นกฎในท้องถิ่นที่มากขึ้นหรือโดยคุณสมบัติที่ใหม่กว่าภายในกฎเดียวกัน

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

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

เมื่อทราบด้าน หากคุณใช้การสืบค้น@media (เช่น@media screen (max-width:500px)) ให้ความสนใจเป็นพิเศษกับการใช้การสืบค้น @media หลังจากที่คุณใช้สไตล์ปกติ เนื่องจากเคียวรี @media จะถูกขีดฆ่า (แม้ว่าจะเฉพาะเจาะจงมากขึ้น) หากตามด้วย css ที่ใช้องค์ประกอบเดียวกัน ตัวอย่าง:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **

นอกเหนือจากคำตอบข้างต้นฉันยังต้องการที่จะเน้นถึงกรณีของการนัดหยุดงานซึ่งทำให้ฉันประหลาดใจ

หากคุณกำลังเพิ่มภาพพื้นหลังให้กับ div:

<div class = "myBackground">

</div>

คุณต้องการปรับขนาดภาพให้พอดีกับขนาดของ div ดังนั้นนี่จะเป็นคำจำกัดความของคลาสปกติของคุณ

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

แต่ถ้าคุณแลกเปลี่ยนลำดับเป็น: -

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

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

หากคุณต้องการนำสไตล์ไปใช้แม้หลังจากได้รับการบ่งชี้ที่น่าประทับใจคุณสามารถใช้"!important"เพื่อบังคับสไตล์ มันอาจไม่ใช่วิธีที่ถูกต้อง แต่แก้ปัญหาได้

มีบางกรณีที่คุณคัดลอกและวางรหัส CSS ในที่ใดที่หนึ่งและแบ่งรูปแบบเพื่อให้ Chrome แสดงคำเตือนสีเหลือง คุณควรลองฟอร์แมตโค้ด CSS อีกครั้งและควรจะปรับใหม่