!important กฎใช้เพื่อแทนที่การจัดรูปแบบของหน้าเว็บ จริงๆ แล้ว มีอีกหลายกรณีที่ทำไมคุณไม่ควร ใช้กฎ !important เทียบกับเหตุผลที่คุณควรทำ มาพูดคุยกันถึงวิธีการใช้และทำไมจึงควรใช้เท่าที่จำเป็นเท่านั้น
การเอาชนะสไตล์ชีต user-agent
เมื่อเขียน CSS จะมีบางกรณีที่คุณต้องเขียนทับสไตล์ชีตที่ได้รับ หากใช้เฟรมเวิร์ก CSS เช่น Bootstrap เพื่อเริ่มและดำเนินการโปรเจ็กต์ คุณอาจต้องการปรับแต่งสไตล์ที่สร้างไว้ในเฟรมเวิร์ก
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
อย่ากังวลมากเกินไปเกี่ยวกับการทำความเข้าใจว่าเกิดอะไรขึ้นในโปรแกรมแก้ไขโค้ดด้านบน กดปุ่มวิ่งและสำรวจสิ่งที่คุณทำ รู้เกี่ยวกับ. เรามี HTML ที่ดูเหมือนว่ามีคลาสและ/หรือรหัส ลิงก์ไปยังสไตล์ชีต CSS ที่ระบุว่าอาจมาจาก Bootstrap และสไตล์ของเราเองบางส่วนใน <head> ของเอกสารที่แสดงผลไม่ถูกต้อง
ใน .navbar ตัวเลือกที่กล่าวถึง background-color: pink; , พิมพ์
'!สิ่งสำคัญ'. ใส่ช่องว่างระหว่างสีและกฎ !สำคัญ เรียกใช้รหัสอีกครั้ง มันเปลี่ยนสีพื้นหลังของแถบนำทางหรือไม่?
นี่เป็นกรณีการใช้งานครั้งแรกของกฎ !สำคัญ เมื่อกำหนดสไตล์ชีต user-agent จากเฟรมเวิร์ก CSS หรือที่อื่น คุณสามารถใช้กฎเพื่อแทนที่สไตล์ที่ Bootstrap ให้มาด้วย
การเอาชนะรูปแบบอินไลน์
กรณีการใช้งานอื่นคือที่ที่เราจะต้องแทนที่สไตล์อินไลน์ขององค์ประกอบ
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
โปรดสังเกตว่า เรามีรูปแบบอินไลน์บางส่วนในเนื้อหาของโค้ด จากนั้นมีการจัดรูปแบบที่อาจแทนที่ได้ใน <style> ในตัวแก้ไขโค้ดด้านบน ใช้กฎ !important ใน CSS เพื่อแทนที่สไตล์อินไลน์
โปรดจำไว้ว่า กฎ !สำคัญ ไม่จำเป็นต้องเป็นแนวปฏิบัติที่ดีที่สุด และควรใช้เพียงเล็กน้อยเท่านั้น มีศักยภาพที่จะนำไปสู่ข้อบกพร่องที่หายากในภายหลังตามท้องถนน
หากคุณรู้สึกว่าจำเป็นต้องใช้กฎ !important และคุณไม่ได้ใช้เฟรมเวิร์ก โดยปกติแล้ว คุณสามารถจัดระเบียบตัวเลือกใหม่เพื่อให้แสดงผลสิ่งที่คุณต้องการดูได้ดียิ่งขึ้น
