CSS The !important Rule
!สำคัญไฉน?
กฎ!important
ใน CSS ใช้เพื่อเพิ่มความสำคัญให้กับคุณสมบัติ/ค่ามากกว่าปกติ
ที่จริงแล้ว หากคุณใช้!important
กฎ กฎนั้นจะแทนที่กฎการจัดสไตล์ก่อนหน้าทั้งหมดสำหรับคุณสมบัติเฉพาะนั้นในองค์ประกอบนั้น!
ให้เราดูตัวอย่าง:
ตัวอย่าง
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
ตัวอย่างที่อธิบาย
ในตัวอย่างข้างต้น ทั้งสามย่อหน้าจะได้รับสีพื้นหลังสีแดง แม้ว่าตัวเลือก ID และตัวเลือกคลาสจะมีความจำเพาะสูงกว่าก็ตาม กฎ!important
จะแทนที่
background-color
คุณสมบัติในทั้งสองกรณี
สำคัญเกี่ยวกับ !important
วิธีเดียวที่จะลบล้าง!important
กฎคือการรวม!important
กฎอื่นในการประกาศที่มีความจำเพาะเหมือนกัน (หรือสูงกว่า) ในซอร์สโค้ด - และปัญหาก็เริ่มต้นขึ้น! สิ่งนี้ทำให้โค้ด CSS เกิดความสับสนและการดีบักจะทำได้ยาก โดยเฉพาะอย่างยิ่งถ้าคุณมีสไตล์ชีตขนาดใหญ่!
เราได้สร้างตัวอย่างง่ายๆ ไม่ชัดเจนนัก เมื่อคุณดูที่ซอร์สโค้ด CSS สีใดที่ถือว่าสำคัญที่สุด:
ตัวอย่าง
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
เคล็ดลับ:เป็นการดีที่จะทราบเกี่ยวกับ!important
กฎ คุณอาจเห็นกฎนี้ในซอร์สโค้ด CSS บางตัว อย่างไรก็ตาม อย่าใช้มันจนกว่าคุณจะจำเป็นจริงๆ
อาจใช้ !important . อย่างยุติธรรมหนึ่งหรือสองครั้ง
วิธีหนึ่งที่จะใช้!important
คือถ้าคุณต้องแทนที่สไตล์ที่ไม่สามารถแทนที่ด้วยวิธีอื่นได้ อาจเป็นได้หากคุณกำลังทำงานบนระบบจัดการเนื้อหา (CMS) และไม่สามารถแก้ไขได้โค้ด CSS จากนั้น คุณสามารถตั้งค่าสไตล์แบบกำหนดเองบางอย่างเพื่อแทนที่สไตล์ CMS บางส่วนได้
อีกวิธีหนึ่งในการใช้!important
คือ: สมมติว่าคุณต้องการรูปลักษณ์พิเศษสำหรับปุ่มทั้งหมดบนหน้า ในที่นี้ ปุ่มต่างๆ จะถูกจัดรูปแบบด้วยสีพื้นหลังสีเทา ข้อความสีขาว และช่องว่างภายในและเส้นขอบบางส่วน:
ตัวอย่าง
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
ลักษณะของปุ่มในบางครั้งอาจเปลี่ยนแปลงได้ หากเราใส่ไว้ในองค์ประกอบอื่นที่มีความเฉพาะเจาะจงสูงกว่า และคุณสมบัติขัดแย้งกัน นี่คือตัวอย่าง:
ตัวอย่าง
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
ในการ "บังคับ" ปุ่มทั้งหมดให้มีลักษณะเหมือนกัน ไม่ว่าจะเกิดอะไรขึ้น เราสามารถเพิ่ม!important
กฎให้กับคุณสมบัติของปุ่มได้ดังนี้:
ตัวอย่าง
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}