หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

ตีความลำดับความสำคัญของ CSS ให้กับคุณ

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-07-01 17:17:19

ก่อนที่จะพูดถึงลำดับความสำคัญของ CSS เราต้องเข้าใจว่า CSS คืออะไรและใช้ทำอะไร

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

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

จริงๆ แล้วการพูดถึง CSS คืออะไรและหน้าที่ของ CSS คืออะไร ฉันเชื่อว่าเพื่อน ๆ ที่มีส่วนร่วมในการผลิตหน้าเว็บต่างก็เคยชินกับ CSS เหล่านี้มาแล้วไม่มากก็น้อย

ใกล้บ้านมากขึ้น เรามาเข้าหัวข้อของวันนี้กันดีกว่า:

1. ลำดับความสำคัญของ CSS คืออะไร?

ลำดับความสำคัญที่เรียกว่า CSS หมายถึงลำดับการแยกวิเคราะห์สไตล์ CSS ในเบราว์เซอร์

2. กฎลำดับความสำคัญของ CSS

เนื่องจากสไตล์มีลำดับความสำคัญ จึงจะมีกฎที่ต้องยอมรับในลำดับความสำคัญนี้ และ "กฎ" นี้เป็นจุดเน้นของบทความนี้

ความเฉพาะเจาะจงในสไตล์ชีทจะอธิบายน้ำหนักสัมพัทธ์ของกฎต่างๆ กฎพื้นฐานคือ:

  1. นับจำนวนแอตทริบิวต์ ID ในตัวเลือก
  2. นับจำนวนแอ็ตทริบิวต์ CLASS ในตัวเลือก
  3. นับจำนวนชื่อแท็ก HTML ในตัวเลือก

สุดท้ายให้เขียนตัวเลขสามตัวตามลำดับที่ถูกต้องโดยไม่ต้องเว้นวรรคหรือลูกน้ำเพื่อให้ได้ตัวเลขสามหลัก (css2.1 ใช้ตัวเลข 4 หลัก) (โปรดทราบว่าคุณต้องแปลงตัวเลขให้เป็นตัวเลขที่มากขึ้นซึ่งลงท้ายด้วยตัวเลขสามหลัก) รายการตัวเลขสุดท้ายที่ตรงกับตัวเลือกช่วยให้ระบุได้ง่ายว่าคุณลักษณะใดของตัวเลขที่สูงกว่าจะแทนที่คุณลักษณะของตัวเลขที่ต่ำกว่า

ตัวอย่างเช่น:

  1. สำหรับตัวเลือก ID แต่ละตัว (#someid) ให้เพิ่ม 0,1,0,0
  2. เพิ่ม 0,0,1,0 ให้กับตัวเลือกคลาสแต่ละตัว (.someclass), ตัวเลือกแอตทริบิวต์แต่ละตัว (รูปแบบเช่น [attr=value] ฯลฯ ) และแต่ละคลาสหลอก (รูปแบบ: โฮเวอร์ ฯลฯ )
  3. สำหรับแต่ละองค์ประกอบหรือองค์ประกอบหลอก (:firstchild) ฯลฯ ให้เพิ่ม 0,0,0,1
  4. ตัวเลือกอื่นๆ ได้แก่ตัวเลือกสากล * บวก 0,0,0,0 มันเทียบเท่ากับการไม่เพิ่ม แต่นี่ก็เป็นความจำเพาะเช่นกันซึ่งจะอธิบายในภายหลัง

3. รายการตัวเลือกสำหรับการจำแนกคุณสมบัติ

นี่คือรายการตัวเลือกที่จัดเรียงตามคุณลักษณะ:

ตัวเลือก

ค่าลักษณะเฉพาะ

h1 {สี:น้ำเงิน;}

1

พีเอ็ม {color:purple;}

 2

.แอปเปิ้ล {สี:แดง;}

 10

p.bright {สี:เหลือง;}

 11

p.bright em.dark {สี:สีน้ำตาล;}

 ยี่สิบสอง

#id316 {สี:เหลือง}

 100

เมื่อพิจารณาจากตารางด้านบนเพียงอย่างเดียว ดูเหมือนว่าจะเข้าใจยาก นี่คืออีกตารางหนึ่ง:

ตัวเลือก

ค่าลักษณะเฉพาะ

h1 {สี:น้ำเงิน;} 1
พีเอ็ม {color:purple;} 1+1=2
.แอปเปิ้ล {สี:แดง;} 10
p.bright {สี:เหลือง;} 1+10=11
p.bright em.dark {สี:สีน้ำตาล;} 1+10+1+10=22
#id316 {สี:เหลือง} 100

จากที่กล่าวมาข้างต้น จะเห็นได้ง่ายว่าน้ำหนักของแท็ก HTML คือ 1 น้ำหนักของ CLASS คือ 10 น้ำหนักของ ID คือ 100 และน้ำหนักที่สืบทอดมาคือ 0 (จะมีการหารือในภายหลัง)

เพิ่มสตริงของตัวเลขทีละนิดตามกฎเหล่านี้เพื่อให้ได้น้ำหนักสุดท้าย จากนั้นเปรียบเทียบทีละนิดจากซ้ายไปขวาเมื่อทำการเปรียบเทียบและเลือก

ปัญหาลำดับความสำคัญคือปัญหาการแก้ไขข้อขัดแย้งจริงๆ เมื่อตัวเลือก CSS เลือกองค์ประกอบเดียวกัน (เนื้อหา) จะต้องเลือกกฎ CSS ที่แตกต่างกันตามลำดับความสำคัญ จริงๆ แล้วมีปัญหามากมายที่เกี่ยวข้อง

ต้องบอกว่าเราต้องพูดถึงการสืบทอดของ CSS

บทความที่เกี่ยวข้อง