กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

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;
}