ผลลัพธ์ที่เราต้องการบรรลุคือการเพิ่มไอคอนเล็กๆ ให้กับลิงก์ทั้งหมดที่ชี้ไปยังไซต์ที่ไม่ใช่ไซต์นี้ เพื่อบอกผู้ใช้ว่าการคลิกลิงก์นี้จะนำคุณออกจากไซต์นี้ นี่คือลิงก์ภายนอก แน่นอนว่าสิ่งนี้อาจทำได้โดยใช้ JavaScript ที่ซับซ้อนมากขึ้น แต่ตอนนี้เราสามารถบรรลุฟังก์ชันนี้ผ่านตัวเลือกแอตทริบิวต์ CSS 3
a[href^=”http:”] {
พื้นหลัง: url (images/externalLink.gif) ไม่ทำซ้ำด้านบนขวา;
ช่องว่างภายในขวา: 10px;
}
ความหมายของโค้ดด้านบนคือ: ลิงก์ทั้งหมดที่ขึ้นต้นด้วย http: จะถูกเพิ่มด้วยไอคอนลูกศรเล็กๆ เพื่อเตือนผู้ใช้ว่านี่คือลิงก์ภายนอก และผู้ใช้จะออกจากไซต์เมื่อคลิก อาจกล่าวได้ว่าฟังก์ชันนี้ใช้งานง่ายมากและเน้นย้ำถึงความสะดวกในการใช้งานของการออกแบบเว็บไซต์
แน่นอนว่าเป็นเพราะลิงก์ทั้งหมดที่ชี้ไปยังไซต์นี้ใช้ที่อยู่แบบสัมพันธ์กัน จะเกิดอะไรขึ้นหากลิงก์ไปยังไซต์นี้ขึ้นต้นด้วย http: หรือใช้ทั้งที่อยู่แบบสัมบูรณ์และที่อยู่แบบสัมพันธ์ เราสามารถใช้โค้ดต่อไปนี้:
a[href^=”http:”] {
พื้นหลัง: url (images/externalLink.gif) ไม่ทำซ้ำด้านบนขวา;
ช่องว่างภายในขวา: 10px;
-
[href*=”www.dudo.org”] {
พื้นหลัง:ไม่มี;
ช่องว่างภายใน:0;
}
กฎสองข้อข้างต้นคือ: กฎทั้งหมดที่ขึ้นต้นด้วย http: จะถูกเพิ่มด้วยไอคอนลิงก์ภายนอก และกฎที่ขึ้นต้นด้วย http://www.dudo.org/ จะไม่ถูกนำมาใช้ ไอคอนลูกศรจะไม่ปรากฏขึ้น
แหล่งที่มาของบทความ: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm