ดูที่ CSS3 ตัวเลือกโครงสร้างชนิดแรก

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

สิ่งหนึ่งที่ฉันชอบเกี่ยวกับ CSS3 คือการเพิ่มตัวเลือกใหม่ที่ช่วยให้เราสามารถกำหนดเป้าหมายองค์ประกอบเฉพาะโดยไม่ต้องพึ่งพา ชั้น, รหัส หรือแอตทริบิวต์องค์ประกอบอื่น ๆ และสิ่งที่เราจะกล่าวถึงในที่นี้คือตัวเลือกต่อไปนี้, : ครั้งแรกของชนิด.

: ครั้งแรกของชนิด ตัวเลือกจะกำหนดเป้าหมายเด็กคนแรกขององค์ประกอบที่ระบุเช่นตัวอย่างข้อมูลด้านล่างจะกำหนดเป้าหมายไปที่ลูกคนแรก H2 บนหน้าเว็บ.

 h2: การประกาศสไตล์ครั้งแรก / * สไตล์ * / 

: ครั้งแรกของชนิด ก็เท่ากับ : ที่ n ของประเภท (1), ดังนั้นแทนที่จะเลือกเท่านั้น เป็นครั้งแรก ของประเภทเราสามารถเลือกที่สองที่สามและต่อไป ตัวอย่างต่อไปนี้จะกำหนดเป้าหมายที่สอง H2 องค์ประกอบบนหน้าเว็บ.

 h2: nth-of-type (2) / * การประกาศสไตล์ * / 

: ครั้งแรกของชนิด” VS. “: ครั้งแรกที่เด็ก”

ดูเหมือนว่าตัวเลือกสองตัวนี้กำลังทำสิ่งเดียวกัน แต่ไม่ใช่ในกรณีนี้ มาดูการสาธิตต่อไปนี้:

สมมติว่าเรามีองค์ประกอบห้าย่อหน้าที่อยู่ภายใน div, อย่างนี้:

 
 
วรรค 1
 
วรรค 2
 
วรรค 3
 
วรรค 4
 
วรรค 5
 
 

ตอนนี้เราต้องการเลือกย่อหน้าแรกโดยใช้ : ครั้งแรกที่เด็ก ผู้เลือก.

 p: ลูกคนแรก padding: 5px 10px; รัศมี - ชายแดน: 2px; พื้นหลัง: # 8960a7; สี: #fff; เส้นขอบ: 1px solid # 5b456a;  

และตามที่เราคาดไว้ย่อหน้าแรกจะถูกเลือกเรียบร้อยแล้ว.

• : การสาธิตลูกคนแรก

อย่างไรก็ตามเมื่อเรา เพิ่มองค์ประกอบที่แตกต่างกันก่อน ย่อหน้าแรกสมมุติว่า h1, ชอบตัวอย่างด้านล่าง:

 
 
หัวข้อ 1
 
วรรค 1
 
วรรค 2
 
วรรค 3
 
วรรค 4
 
วรรค 5
 
 

ย่อหน้าแรกจะไม่ถูกเลือก, เป็นเด็กคนแรกที่อยู่ภายใน div คือ ไม่มีย่อหน้าอีกต่อไป, แต่ตอนนี้เป็น h1.

ดังนั้นนี่คือสถานการณ์ที่ : ครั้งแรกของชนิด ตัวเลือกมาเพื่อแก้ไขปัญหา.

 p: first-of-type padding: 5px 10px; รัศมี - ชายแดน: 2px; พื้นหลัง: # a8b700; สี: #fff; เส้นขอบ: 1px solid # 597500;  

• : การสาธิตชนิดแรก

“สุดท้าย” ผู้เลือก

อยู่ที่ไหน “เป็นครั้งแรก”, แล้วก็จะมี “สุดท้าย”.

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

ตัวอย่างเช่นตัวอย่างนี้ด้านล่างจะกำหนดเป้าหมายย่อหน้าสุดท้ายภายใน div.

 p: ลูกคนสุดท้าย padding: 5px 10px; รัศมี - ชายแดน: 2px; พื้นหลัง: # 8960a7; สี: #fff; เส้นขอบ: 1px solid # 5b456a;  

• : การสาธิตลูกคนสุดท้าย

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

ตามด้วยองค์ประกอบอื่นโดยตรง.

 p: ประเภทสุดท้าย padding: 5px 10px; รัศมี - ชายแดน: 2px; พื้นหลัง: # a8b700; สี: #fff; เส้นขอบ: 1px solid # 597500;  

• : การสาธิตชนิดสุดท้าย

The Selectivizr

เช่นเดียวกับคุณสมบัติใหม่อื่น ๆ ใน CSS3 ตัวเลือกเหล่านี้ไม่ได้รับการสนับสนุนในเบราว์เซอร์เก่าส่วนใหญ่ Internet Explorer 6 ถึง 8, ด้วยข้อยกเว้นสำหรับ : ครั้งแรกที่เด็ก ตัวเลือกตามที่ได้รับการเพิ่มตั้งแต่ CSS2.1 มันญาติ :ลูกคนสุดท้อง ถูกเพิ่มใน CSS3 เท่านั้น.

ดังนั้นหากตัวเลือกทั้งหมดที่เรากล่าวถึงในที่นี้จำเป็นสำหรับเว็บไซต์ของคุณจริงๆคุณสามารถใช้ไลบรารี JavaScript ที่เรียกว่า Selectivizr เพื่อจำลองการทำงานของตัวเลือก CSS3 เหล่านั้น.

Selectivizr นั้นขึ้นอยู่กับไลบรารี JavaScript อื่นเพื่อให้สามารถทำงานได้เช่น jQuery, Dojo, Prototype และ MooTools และจากตารางเปรียบเทียบในเว็บไซต์ทางการ MooTools ดูเหมือนว่าจะสามารถจัดการกับตัวเลือกทั้งหมดได้.

ดังนั้นขอรวมไว้พร้อมกับ Selectivizr ดังนี้

ความคิดเห็นตามเงื่อนไขข้างต้นจะช่วยให้มั่นใจได้ว่าห้องสมุดเหล่านี้จะโหลดใน Internet Explorer 8 และด้านล่างเท่านั้น.

สุดท้ายคุณสามารถดูการสาธิตจากลิงค์ต่อไปนี้และตอนนี้มันควรจะทำงานได้ทั้งในเบราว์เซอร์ที่ทันสมัยและเก่า (IE8 และด้านล่าง) คุณยังสามารถดาวน์โหลดไฟล์ต้นฉบับเพื่อตรวจสอบเพิ่มเติมได้ สนุก.

• การสาธิต
• แหล่งดาวน์โหลด