ความคิดเห็น: HTML5 ได้เพิ่มตัวเลือก CSS ใหม่และหมวดหมู่หลอก บทความนี้ได้รวบรวมบางอย่างและให้คำแนะนำง่ายๆในการใช้งาน เพื่อนที่ชอบ HTML5 สามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
ตัวเลือกp [ชื่อ^= my] {font-size: 14px}
ตัวเลือก ^= กฎถูกนำไปใช้กับแท็ก <p> องค์ประกอบทั้งหมดพร้อมแอตทริบิวต์ชื่อที่เริ่มต้นด้วยของฉัน
p [ชื่อ $ = my] {font-size: 14px}
ตัวเลือก $ = กฎใช้กับแอตทริบิวต์ชื่อทั้งหมดที่ลงท้ายด้วยแท็กองค์ประกอบ <p> ของฉัน
p [ชื่อ*= my] {font-size: 14px}
ตัวเลือก $ = กฎถูกนำไปใช้กับแอตทริบิวต์ชื่อทั้งหมดที่มีองค์ประกอบ <p> ที่ลงท้ายด้วยของฉัน
ตัวเลือก>, +, ~
ตัวเลือก> หมายความว่าองค์ประกอบที่ได้รับผลกระทบเป็นลูกขององค์ประกอบแรก
ตัวเลือก + ตัวเลือกนี้หมายถึงองค์ประกอบทันทีตามองค์ประกอบและองค์ประกอบทั้งสองนี้จะต้องมีพาเรนต์เดียวกัน
ตัวเลือก ~ คล้ายกับ +แต่องค์ประกอบที่ได้รับผลกระทบไม่จำเป็นต้องเป็นไปตามองค์ประกอบแรก
เพิ่มชื่อของ pseudo-class และองค์ประกอบอ้างอิง:
ตัวอย่าง: myclass: nth-child (2)
องค์ประกอบที่สองในองค์ประกอบ myclass
คำหลักคี่แม้
MyClass: nth-cild (คี่): ส่งผลกระทบต่อตำแหน่งดัชนีขององค์ประกอบหลักด้วยจำนวนคี่
MyClass: nth-cild (แม้): ส่งผลกระทบต่อตำแหน่งดัชนีขององค์ประกอบหลักของมันคือแม้กระทั่ง
<style>
. -test: nth-child (คี่)
-
สี: สีน้ำเงิน;
-
.Test: Nth-Cild (แม้)
-
สี: สีแดง;
-
. -test: nth-child (2)
-
สี: สีเขียว;
-
</style>
<div>
<p>
1
</p>
<p>
2
</p>
</div>
<p>
1
</p>
<p>
2
</p>
<p>
1
</p>
<p>
2
</p>
ผลกระทบมีดังนี้:
1
2
1
2
1
2
ลบล้างคลาสหลอก
: ไม่ใช่ (p) {สี: สีแดง}
องค์ประกอบอื่น ๆ ทั้งหมดยกเว้นองค์ประกอบ <p> เป็นสีแดง