div p.test{ color:blue; }
p.test{color:red }

“โดยปกติแล้ว ตัวหนังสือที่ได้ ควรจะเป็น สีแดง ซึ่งกำหนดไว้บรรทัดล่าง
แต่ในกรณีนี้ บรรทัดบน มีการกำหนดที่มากกว่า จึงมีความสำคัญกว่านั่นเองครับ”

…อธิบายใหม่แบบนี้เข้าใจเลยครับ…

ขอคุณครับ

PS. อยากให้ Webmaster เขียนติวเตอร์ การ Lay out
และ วาง Block ของภาพและข้อความ ต่างๆ บน Web แบบคร่าวๆ ด้วย CSS

ขอให้เป็นแหล่งความรู้ดีๆแบบนี้ต่อไปนะครับ……….

#id1{xxx} —-> มีการกำหนด id อย่างเดียว 1 ตัว = 100

โดยสังเกตุจาก # และไม่มี Class ย่อยตาม

แล้ว….
UL UL LI.red {xxx} —-> a=0 b=1 c=3
LI.red {xxx} —-> a=0 b=1 c=1
LI {xxx} —-> a=0 b=0 c=1

นับ และ ดูอย่างไรว่าอันไหนเป็น class หรือ tag html ????????

การคำนวณลำดับความสำคัญจาก การประกาศ class และ id
ให้ a เป็นจำนวนของ id b เป็นจำนวนของ class และ c เป็นจำนวนของ tag html

#id1 {xxx} /* a=1 b=0 c=0 –> เรียงตัวเลข abc = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> เรียงตัวเลข abc = 013 */
LI.red {xxx} /* a=0 b=1 c=1 –> เรียงตัวเลข abc = 011 */
LI {xxx} /* a=0 b=0 c=1 –> เรียงตัวเลข abc = 001 */

ตัวเลขมากกว่า จะมีลำดับความสำคัญที่สูงกว่า จะเห็นว่า id มีความสำคัญสูงกว่า class หากเรียก id และ class พร้อมๆกันลักษณะที่กำหนด จะเป็นไปตาม id

ตัวอย่าง

ul li.test{ color:blue; } /*012*/
li.test{color:red } /*011*/

คุณว่าจะได้สีอะไร

ลองนำโค้ดนี้ไป paste ในส่วน body ดู นะครับ

หากตัวเลขมีค่าเท่ากัน สิ่งที่ประกาศไว้ลำดับสุดท้ายจะมีความสำคัญสูงกว่าครับ

???????