CSS Specificity คือการนำเอา CSS Selector ที่มีน้ำหนักมากที่สุดมาใส่ไว้กับelementตัวนั้น บางครั้งเราอาจจะสังเกตได้บ่อยๆ ทำไมเราสั่งย้อมสีตัวนั้นไว้แล้ว เอ็ะ!!ทำไมมันไปออกอีกอันกนึ่งละ ซึ่งในทีนี้ผมจะขอพูดถึง CSS Selectorทั้งหมด4แบบ ได้แก่ In-line selector,ID selector, Class selector,Element Selectorซึ่งมีรูปแบบดังนี้
Example:
<a style="
background-color:
red>
รูปแบบนี้ สำหรับผมถือว่าน้ำหนักมากที่สุด ให้น้ำหนักอยู่ที่ 1000
Example:
#name {
color: blue;
}
รูปแบบนี้ สำหรับผมถือว่ามีน้ำหนักมากเป็นลำดับที่2 ให้มีน้ำหนักอยู่ที่ 100
Example:
.control {
color: blue;
}
รูปแบบนี้ สำหรับผมถือว่ามีน้ำหนักมากเป็นลำดับที่3 ให้มีน้ำหนักอยู่ที่ 10
Example:
body {
color: blue;
}
รูปแบบนี้ สำหรับผมถือว่ามีน้ำหนักมากเป็นลำดับที่4 ให้มีน้ำหนักอยู่ที่ 1
Home
<nav>
<ul>
<li>
<a href="index.html">INDEX</a>
</li>
<li class="active">
<a href="home.html">HOME</a>
</li >
</ul >
</nav >
Index
<nav>
<ul>
<li>
<li class="active">
<a href="index.html">INDEX</a>
</li>
<a href="home.html">HOME</a>
</li >
</ul >
</nav >
style-1
ul li {
display: inline-block;
list-style: none;
padding: 10px;
}
ul li a {
text-decoration: none;
color: red;
}
ul li.active {
background-color: green;
}
style-2
ul li {
display: inline-block;
list-style: none;
padding: 10px;
}
ul li.active a {
color: gold;
}
ul li a {
text-decoration: none;
color: red;
}
ul li.active {
background-color: transparent;
}
จากตัวCSSทั้ง2นั้นสังเกตได้ว่ามีโค้ดที่ค่อนข้างเหมือนกัน คือ
1) ul li
2) ul li a
สองอย่างนี้ทำงานเหมือนกันทุกอย่าง แต่ สิ่งหนึ่งที่แตกต่างกันแน่ๆ คือ ul li.active แล้วมันแตกต่างกันตรงไหน?
ตรงที่ style-1 นั้น ใช้เป็น background-color: green; แต่ style-2 นั้นใช้เป็น background-color: transparent; ซึ่งถ้าเราเทียบเอาจากการคำนวณแล้วมีน้ำหนักเท่ากัน อ้าว!! แล้วถ้าเท่ากัน มันเกิดอันไหนขึ้นละ แน่นอนว่าถ้าค่าเท่ากัน โปรแกรมจะทำการเรียกอันที่importเข้ามาก่อน(ถ้าทั้ง2ตัวทำงานเหมือนกันแต่ต่างกันนิดหน่อย) แต่ถ้า2 ตัวไม่เกี่ยวข้องกัน มันก็จะแสดงออกมาทั้ง2ตัว