في بعض الأحيان قد نرغب في أن تعرض الروابط الداخلية أنماطًا مختلفة عن الروابط الخارجية، مثل الروابط الخارجية. أريد إضافة أيقونة صغيرة بجانب الرابط للإشارة إلى أنه رابط خارجي، لإخبار الزوار والسماح لهم بتأكيد ما إذا كانوا سيفتحون في نافذة جديدة أو في هذه النافذة. قد نفعل هذا:
| وفيما يلي المحتوى المقتبس: .خارجي { الخلفية: url(images/external.gif) أعلى اليمين بدون تكرار؛ الحشو الأيمن: 12 بكسل؛ } |
ثم قم بتطبيق CSS على كل رابط خارجي بالطبع، هذا ليس مستحيلاً، ولكنه مرهق للغاية.
فهل هناك طريقة جيدة لتحقيق ذلك؟ يملك. يمكنك استخدام تحديد السمات في CSS3، ولكن هذه الطريقة غير مدعومة في IE6 والإصدارات الأقدم، وقد تم تنفيذها في FireFox.
بناء الجملة الأساسي لمحدد السمة هو: [att^=val]
على سبيل المثال:
| وفيما يلي المحتوى المقتبس: أ[href^="http://www.admin5.com"] { صورة الخلفية: لا شيء؛ الحشو الأيمن:0px; } |
سيتم العثور على جميع الروابط التي تبدأ بـ http://www.cz268.com.cn وسيتم استبعاد صور الخلفية. مع السمات المذكورة أعلاه، سيكون من الأسهل التعامل معها
| وفيما يلي المحتوى المقتبس: <نمط النوع = "نص/CSS"> أ { الخلفية: url(external.gif) أعلى اليمين بدون تكرار؛ الحشو الأيمن: 14 بكسل؛ حجم الخط: 12 بكسل؛ } أ[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"> |