กฎ !important CSS

ในมันที่กำลังใช้ !important?

CSS มี !important กฎที่ใช้เพื่อให้ความสำคัญของคุณสมบัติ/ค่าสูงกว่ารูปแบบทั่วไป

ในต้องการใช้ !important กฎที่ครอบคลุมความสำคัญของคุณสมบัติที่มีการประกาศในต้นฉบับโค้ดที่มีความเฉพาะทาง (หรือสูงกว่า)

จะมีตัวอย่างหนึ่งเพื่อแสดงให้เห็น:

ตัวอย่าง

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

ทดลองด้วยตัวเอง

การชี้แจงตัวอย่าง

ในตัวอย่างดังกล่าว สามตัวอย่างทั้งสามจะได้สีหลังแดง ถึงแม้ว่าตัวเลือกเอาไว้ด้วย ID และ class จะมีความเฉพาะทางสูงขึ้น!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;
}

ทดลองด้วยตัวเอง