CSS ฉบับเรียนซับซ้อน

การจัดกลุ่มเลือกตัวอ่าน

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

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

การสืบทอดและปัญหา

ตาม CSS ตัวเด็กจะสืบทอดคุณสมบัติจากตัวพ่อของมัน แต่มันไม่เสมอไปตามวิธีนี้ตลอดเวลา ดูกฎนี้

body {
     font-family: Verdana, sans-serif;
     }

ตามกฎนี้ ตัวเลือก body ของเว็บไซต์จะใช้ตัวอักษร Verdana (หากระบบของผู้ใช้มีตัวอักษรนี้)

ผ่านการสืบทอด CSS ตัวเด็กจะสืบทอดคุณสมบัติของตัวระดับสูงสุด (ในตัวอย่างนี้คือ body) ที่มี (ซึ่งตัวเด็กเหล่านี้เช่น p, td, ul, ol, ul, li, dl, dt และ dd) ไม่จำเป็นต้องมีกฎเพิ่มเติม ทุกตัวเด็กของ body ควรแสดงตัวอักษร Verdana ตัวเด็กของตัวเด็กก็เช่นเดียว และในบริเวณส่วนใหญ่ของเบราเซอร์สมัยใหม่ก็เป็นเช่นนั้น

แต่ในยุคที่สงครามเบราเซอร์มีเลือดและเลือด เช่นนั้นมันอาจจะไม่เกิดขึ้น ในช่วงนั้นการสนับสนุนมาตรฐานไม่ใช่การเลือกของกิจการของบริษัทเลยนี้ ตัวอย่างเช่น Netscape 4 ไม่สนับสนุนการสืบทอด มันไม่เพียงแค่ละเลยเอาการสืบทอด แต่ยังละเลยทิ้งกฎที่ถูกนำมาใช้กับ body element อีกด้วย IE/Windows จนถึง IE6 ยังมีปัญหาเดียวกันนี้ รูปแบบตัวอักษรในตารางจะถูกละเลยออกไป เราจะทำอย่างไรต่อไปมันเป็นปัญหาของเรา

เป็นฝันสวยงามที่ต่อต้าน Netscape 4

โชคดีว่าคุณสามารถใช้กฎฟุ้มเจาะที่เรียกว่า "Be Kind to Netscape 4" ซึ่งเป็นกฎฟุ้มเจาะที่ไม่มีทางทางเลือกเพื่อจัดการปัญหาที่เบราเซอร์ลักษณะเก่าไม่สามารถเข้าใจกฎระบบติดตามที่ยากต่อการสืบทอดอยู่

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

เวอร์ชั่น 4.0 ของเบราวเซอร์ไม่สามารถเข้าใจการสืบทอด แต่พวกเขาสามารถเข้าใจกฎเลือกตัวเลือกกลุ่มได้ ดังนั้นการทำเช่นนี้จะใช้บางช่องเวลาของความกว้างของผู้ใช้ แต่ถ้าต้องการสนับสนุนผู้ใช้ Netscape 4 ก็จำเป็นต้องทำเช่นนี้.

การสืบทอดนั้นเป็นมาละกีดไหม?

ถ้าคุณไม่ต้องการให้ "Verdana, sans-serif" ตัวอักษรถูกสืบทอดโดยทุกตัวแทนลูก ควรทำอย่างไร? ตัวอย่างเช่น คุณต้องการให้ตัวอักษรของปารากราฟเป็น Times ไม่มีปัญหา สร้างกฎที่เจาะจงสำหรับ p โดยที่มันจะหลุดออกจากกฎของตัวแทนพ่อ:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }