CSS !คุณสมบัติที่สำคัญ

สารบัญ

!สำคัญ คืออะไร?

กฎ !important ใน CSS ใช้เพื่อเพิ่มความสำคัญให้กับคุณสมบัติ/ค่ามากกว่าปกติ

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

ให้เราดูตัวอย่าง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

ตัวอย่างอธิบาย

ในตัวอย่างข้างต้น ทั้งสามย่อหน้าจะมีสีพื้นหลังสีแดง แม้ว่าตัวเลือก ID และตัวเลือกคลาสจะมีความจำเพาะที่สูงกว่าก็ตาม กฎ !important จะแทนที่คุณสมบัติ สีพื้นหลัง ในทั้งสองกรณี

สำคัญ เกี่ยวกับ !สำคัญ

วิธีเดียวที่จะแทนที่ !important กฎคือการรวม !important อื่นไว้ด้วย กฎการประกาศที่มีความเฉพาะเจาะจงเหมือนกัน (หรือสูงกว่า) ในซอร์สโค้ด - และปัญหาก็เริ่มต้นขึ้น! สิ่งนี้ทำให้โค้ด CSS เกิดความสับสนและการดีบักจะยาก โดยเฉพาะอย่างยิ่งหาก คุณมีสไตล์ชีตขนาดใหญ่!

เราได้สร้างตัวอย่างง่ายๆ ที่นี่ มันไม่ชัดเจนมากเมื่อคุณดู ซอร์สโค้ด CSS สีใดที่ถือว่าสำคัญที่สุด:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

เคล็ดลับ: เป็นการดีที่จะทราบเกี่ยวกับ !important กฎ. คุณอาจเห็นมันในซอร์สโค้ด CSS บางตัว อย่างไรก็ตาม อย่าใช้มันเว้นแต่คุณจะต้องจำเป็นจริงๆ

อาจมีการใช้ !important หนึ่งหรือสองครั้งโดยชอบธรรม

วิธีหนึ่งในการใช้ !important คือคุณต้องแทนที่ สไตล์ที่ไม่สามารถแทนที่ด้วยวิธีอื่นได้ นี่อาจเป็นถ้าคุณเป็น ทำงานบนระบบจัดการเนื้อหา (CMS) และไม่สามารถแก้ไขโค้ด CSS ได้ จากนั้น คุณสามารถตั้งค่าสไตล์ที่กำหนดเองเพื่อแทนที่สไตล์ CMS บางส่วนได้

อีกวิธีหนึ่งในการใช้ !important คือ: Assume you ต้องการรูปลักษณ์พิเศษของปุ่มทั้งหมดบนเพจ ในที่นี้ปุ่มจะมีรูปแบบเป็นสีเทา สีพื้นหลัง ข้อความสีขาว และช่องว่างภายในและเส้นขอบบางส่วน:

ตัวอย่าง

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>

</body>
</html>

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

ตัวอย่าง

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>

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

ตัวอย่าง

 .button {
  background-color: #8c8c8c !important; 
  color: white 
  !important;
  
  padding: 5px !important;
  border: 1px solid black !important; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c !important; 
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>