ใน CSS 3 สมมติว่าคุณสร้างไฟล์ HTML ที่มีโครงสร้างแท็กต่อไปนี้:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="เนื้อหาระดับอุดมศึกษา"></div>
<div id="nav-รอง"></div>
จากนั้นในไฟล์ CSS
div[id^="nav"] { พื้นหลัง:#ff0; }
หมายเหตุ " ^ "
CSS จะควบคุม [u]div#nav-primary และ div#nav-secondary[/u] ในกรณีนี้ โปรดทราบว่าป้ายกำกับทั้งสองนี้นำหน้าด้วย nav ไม่ชัดเจนว่าคั่นด้วย "-" หรือ ID ตรงกันจากด้านหน้าไปด้านหลัง [เหงื่อ]
div[id$="หลัก"] { พื้นหลัง:#ff0; }
โปรดทราบว่ามันคือ " $ "
CSS จะควบคุม [u]div#nav-primary และ div#content-primary[/u] ในกรณีนี้ โปรดทราบว่ามี ไพรมาร์ อยู่หลังแท็กทั้งสองนี้ ไม่ชัดเจนว่าจะใช้ "-" เป็นตัวคั่นหรือไม่ หรือ ID ตรงกันจากด้านหลังไปด้านหน้า [เหงื่อ]
div[id*="content"] { พื้นหลัง:#ff0; }
โปรดทราบว่ามันคือ " * "
CSS ในกรณีนี้จะควบคุม [u]div#content-primary div#content-secondary และ div#tertiary-content[/u] โปรดทราบว่าแท็กเหล่านี้ทั้งหมดมี เนื้อหา ไม่ชัดเจนว่าแท็กเหล่านี้จะถูกคั่นด้วย "-" หรือไม่ หรือ ID จะถูกสแกนและจับคู่โดยอัตโนมัติหรือไม่ [sweat]
ดูเหมือนว่าผู้เขียนบอกว่าตอนนี้แท็กเหล่านี้ได้รับการสนับสนุนโดยเบราว์เซอร์ต่างๆ เวอร์ชันล่าสุด ยกเว้น IE คุณสามารถลองได้ แต่ฉันจะไม่ลอง ~ [lol]
div#content-primary:target { โครงร่าง:1px ทึบ #300;
โปรดทราบว่า " :target "
ในกรณีนี้ CSS จะควบคุมลิงก์สมอ http: //www.example.com/index.html #content-primary (ลิงก์สมอสามารถเข้าใจได้ว่าเป็นลิงก์ภายในหน้าเว็บ เมื่อเทียบกับ การส่งคืน ที่เห็นในบางเว็บ หน้า) ด้านบน )
ผู้เขียนบอกว่าตอนนี้เบราว์เซอร์ Mozilla และ Safari รองรับสิ่งนี้แล้ว
อินพุต [type = "ข้อความ"]: เปิดใช้งาน { พื้นหลัง: #ffc; }
อินพุต [type = "ข้อความ"]: ปิดการใช้งาน { พื้นหลัง: #ddd;
โปรดทราบว่า " [type="text"]:enabled "
นี่คือ CSS ที่ควบคุมแบบฟอร์ม "[u][type="text"][/u]" ดูเหมือนจะหมายความว่าประเภทในแบบฟอร์มคือข้อความ - - [u]type="password"[/u] จะเป็นอย่างไร?
อินพุต: ตรวจสอบแล้ว { เส้นขอบ: 1px solid #090;
โปรดทราบว่า " :checked "
นี่คือ CSS ที่ควบคุม "เลือก" ของแบบฟอร์ม - -
ผู้เขียนกล่าวว่าขณะนี้เบราว์เซอร์ Opera และ Mozilla รองรับสิ่งเหล่านี้แล้ว
:root { พื้นหลัง:#ff0; }
html { พื้นหลัง:#ff0; }
โปรดใส่ใจกับสิ่งนั้น " :root "
":root" นี้เป็นแท็กระดับที่สูงกว่า html คุณสามารถอ่าน บทความนี้ที่เขียนโดย Chidori Ichiba เพื่อทำความเข้าใจกับ html และเนื้อหาได้อย่างถูกต้อง เขาค้นพบในบทความว่ามีเฟรมอยู่นอก html อิอิ~
ผู้เขียนบอกว่าตอนนี้เบราว์เซอร์ Mozilla และ Safari รองรับสิ่งนี้แล้ว
อันถัดไป : nth-child() น่าสนใจกว่า 555~ คุณสามารถใส่ตัวเลขและตัวอักษรเริ่มต้นในวงเล็บได้~
p:nth-child(3) { สี:#f00; }
ดูเหมือนว่าจะหมายความว่าตาม P ที่ปรากฏครั้งแรก P ทั้งหมดที่เป็นทวีคูณของ "3" จะถูกควบคุม~
p: n-child (คี่) { สี: # f00; }
ดูเหมือนว่าจะหมายความว่าตาม P ตัวแรกที่ปรากฏ จำนวน คี่ ทั้งหมดของ P จะถูกควบคุม~
p: n-child (คู่) { สี: # f00; }
ดูเหมือนว่าจะหมายความว่าตาม P แรกที่ปรากฏขึ้น P ทั้งหมดใน จำนวนคู่ จะถูกควบคุม~
p:n-child(3n+0) { สี:#f00; }
p: n-child (3n) { สี: # f00; }
แท็กทั้งสองนี้เทียบเท่ากัน เนื่องจาก 0 หลังจากแท็กแรกไม่มีผล ความหมายคือ P ที่มากกว่า 3 เท่าของ P แรกที่ปรากฏจะถูกควบคุม~ (ช่างบิดเบี้ยวจริงๆ HOHO~ [ rolleyes]) กล่าวอีกนัยหนึ่ง โดย "n" นี้จะใช้ค่าตั้งแต่ 0.1.2.3.4.5.6....~ P มากเท่าที่คุณสามารถคำนวณได้จะถูกควบคุม - -
tr:n-child(2n+11) { พื้นหลัง:#ff0; }
ถ้าเข้าใจข้างต้นก็เข้าใจได้ไม่ยาก แต่ป้ายที่เขาควบคุมเปลี่ยนเป็น "tr" ซึ่งหมายความว่าตารางจะมีความหลากหลายมากขึ้น ฉันรู้สึกว่าทุกคนจะต้องเก่งเลขคณิตในโรงเรียนประถมและไม่ได้เรียนรู้ กลับบ้านเร็วแล้วเรียนเลขคณิตเบื้องต้นอีกครั้ง - - (อย่างไรก็ตาม ป้ายดังกล่าวจะเพิ่มประสิทธิภาพการประมวลผลของคอมพิวเตอร์หรือไม่ [สับสน] ฉันหวังว่าความคับข้องใจของฉันจะไม่จำเป็น...)
p:last-child { พื้นหลัง:#ff0;
ควบคุม p ก่อน p (NND, p มาและไป, กระทบ pp [เหงื่อ])
:not(p) { เส้นขอบ:1px solid #ccc;
p นี้ไม่ได้รับการควบคุม หมายความว่า ควรใช้สไตล์ของตัวเอง - -
p ~ ul { พื้นหลัง:#ff0;
ul แสดงโดยมีลำดับความสำคัญมากกว่า p ฉันไม่รู้ว่านี่คือวิธีจัดลำดับความสำคัญอะไร - -
โดยพื้นฐานแล้ว นั่นคือทั้งหมดที่ฉันเข้าใจได้ คุณสามารถไปที่เว็บไซต์สองแห่งต่อไปนี้เพื่อเรียนรู้ต่อหากฉันพูดอะไรผิด อย่าลืมบอกฉันด้วย
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/