องค์ประกอบลักษณะ HTML ที่มีคุณลักษณะเฉพาะ
มันเป็นไปได้ที่จะจัดรูปแบบองค์ประกอบ HTML ที่มีแอตทริบิวต์ที่เฉพาะเจาะจงหรือค่าแอตทริบิวต์
CSS [แอตทริบิวต์] เลือก
[attribute] เลือกจะใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ
ตัวอย่างต่อไปนี้เลือกทั้งหมด <a> องค์ประกอบที่มีคุณลักษณะเป้าหมาย:
CSS [แอตทริบิวต์ = "ค่า"] เลือก
[attribute="value"] เลือกจะใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุและความคุ้มค่า
ตัวอย่างต่อไปนี้เลือกทั้งหมด <a> องค์ประกอบที่มี target="_blank" แอตทริบิวต์:
CSS [แอตทริบิวต์ ~ = "ค่า"] เลือก
[attribute~="value"] เลือกจะใช้ในการเลือกองค์ประกอบที่มีค่าแอตทริบิวต์ที่มีคำที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อที่มีรายการพื้นที่ที่แยกออกจากกันของคำซึ่งหนึ่งในนั้นคือ " flower "
ตัวอย่างข้างต้นจะตรงกับองค์ประกอบ title="flower", title="summer flower" และ title="flower new" แต่ไม่ title="my-flower" หรือ title="flowers"
CSS [แอตทริบิวต์ | = "ค่า"] เลือก
[attribute|="value"] เลือกจะใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุที่เริ่มต้นด้วยค่าที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ระดับที่ขึ้นต้นด้วย "top" :
หมายเหตุ: ค่าที่จะต้องมีทั้งคำเพียงอย่างเดียวเช่น class="top" หรือตามด้วยยัติภังค์ ( - ) เช่น class="top-text" !
CSS [แอตทริบิวต์ ^ = "ค่า"] เลือก
[attribute^="value"] เลือกจะใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ค่าเริ่มต้นด้วยค่าที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ระดับที่ขึ้นต้นด้วย "top" :
หมายเหตุ: ค่าไม่ได้จะต้องเป็นทั้งคำ!
CSS [แอตทริบิวต์ $ = "ค่า"] เลือก
[attribute$="value"] เลือกจะใช้ในการเลือกองค์ประกอบที่มีแอตทริบิวต์ค่าลงท้ายด้วยค่าที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ระดับที่ลงท้ายด้วย "test" :
หมายเหตุ: ค่าไม่ได้จะต้องเป็นทั้งคำ!
CSS [แอตทริบิวต์ * = "ค่า"] เลือก
[attribute*="value"] เลือกจะใช้ในการเลือกองค์ประกอบที่มีค่าแอตทริบิวต์มีค่าที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่ประกอบด้วย "te" :
หมายเหตุ: ค่าไม่ได้จะต้องเป็นทั้งคำ!
แบบฟอร์มการจัดแต่งทรงผม
เตอร์ที่แอตทริบิวต์จะมีประโยชน์สำหรับรูปแบบการจัดแต่งทรงผมโดยไม่ต้อง class หรือ ID :
ตัวอย่าง
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
} ลองตัวเอง» เคล็ดลับ: การเยี่ยมชมของเรา สอนรูปแบบ CSS สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการรูปแบบรูปแบบด้วย CSS
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 » ออกกำลังกาย 6 »
ตัวอย่างเพิ่มเติมของ CSS Selectors
ใช้งานของเรา Tester CSS เลือก ที่จะแสดงให้เห็นถึงเตอร์ที่แตกต่างกัน
สำหรับการอ้างอิงที่สมบูรณ์ของทุกตัวเลือก CSS โปรดไปที่เรา CSS Selectors อ้างอิง