บางครั้งเราอาจต้องการให้ลิงก์ภายในแสดงสไตล์ที่แตกต่างจากลิงก์ภายนอก เช่น ลิงก์ภายนอก ฉันต้องการเพิ่มไอคอนเล็ก ๆ ถัดจากลิงค์เพื่อระบุว่าเป็นลิงค์ภายนอกเพื่อบอกผู้เยี่ยมชมและให้พวกเขายืนยันว่าจะเปิดในหน้าต่างใหม่หรือในหน้าต่างนี้ เราอาจทำสิ่งนี้:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: .ภายนอก - พื้นหลัง: url (images/external.gif) ไม่ทำซ้ำด้านบนขวา; ช่องว่างภายในขวา:12px; - |
จากนั้นใช้ CSS กับแต่ละลิงก์ภายนอก แน่นอนว่านี่ไม่ใช่เรื่องที่เป็นไปไม่ได้ แต่มันยุ่งยากเกินไป
มีวิธีที่ดีในการบรรลุเป้าหมายหรือไม่? มี. คุณสามารถใช้การเลือกแอตทริบิวต์ใน CSS3 ได้ แต่วิธีนี้ไม่รองรับใน IE6 และต่ำกว่า โดยได้ถูกนำมาใช้ใน FireFox
ไวยากรณ์พื้นฐานของตัวเลือกแอตทริบิวต์คือ: [att^=val]
ตัวอย่างเช่น:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: a[href^="http://www.admin5.com"] - ภาพพื้นหลัง: ไม่มี; ช่องว่างภายในขวา: 0px; - |
ลิงก์ทั้งหมดที่ขึ้นต้นด้วย http://www.cz268.com.cn จะพบได้ และภาพพื้นหลังจะถูกยกเว้น ด้วยคุณสมบัติข้างต้น จะง่ายต่อการจัดการ
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <style type="text/css"> ก - พื้นหลัง: url (external.gif) ไม่ทำซ้ำด้านบนขวา; ช่องว่างภายในขวา:14px; ขนาดตัวอักษร:12px; - a[href^="http://www.cz268.com.cn"] - ภาพพื้นหลัง: ไม่มี; ช่องว่างภายในขวา: 0px; - </สไตล์> |
ขั้นแรกให้เพิ่มไอคอนลงในลิงก์ทั้งหมด จากนั้นลบไอคอนลิงก์ที่ขึ้นต้นด้วย http://www.cz268.com.cn ซึ่งจะทำให้ลิงก์ภายนอกแสดงไอคอนได้ และลิงก์ภายในไม่แสดงไอคอน
หมายเหตุ: สิ่งนี้ใช้ได้กับ Firefox แต่ไม่ใช่ IE
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |