हम ई-मेल लिंक में सुधार करेंगे

CSS Attribute Selector क्या है?

CCS हमें तत्व के प्रकार के बजाय लिंक विशेषताओं के आधार पर तत्वों को स्टाइल करने की क्षमता देता है। उदाहरण के लिए, आप पहले से ही हेडर तत्व h1 को सजाने का तरीका जानते हैं:



h1 { color: blue; }







आप हेडर विशेषता को थोड़ा साफ कर सकते हैं:



h1[title] { color: blue; }







हम आगे भी जा सकते हैं:



h1[title="Go Home"] { color: blue; } /* "Go Home" */

h1[title~="Go Home"] { color: red; } /* "Go Home" - */

h1[title^="Go Home"] {color: green; } /* "Go Home" */







साबुन लिंक के बारे में क्या अनोखा है?

अब पिछले उदाहरणों से अनुभव लेते हैं और इसका निर्माण करते हैं:



a[href^="mailto"]:hover:after { content: attr(title); }







हेडर विशेषता जिसे हम हॉवर पर सेट करते हैं। यह काम करेगा, लेकिन यह पता चल सकता है कि लिंक के तुरंत बाद पाठ दिखाई देता है। इसलिए, हम इसके लिए कोड को सही करते हैं:



a[href^="mailto"]:hover:after { content: " > " attr(title); }







क्या हुआ:



[ उदाहरण ]



[*] यह स्पष्ट करने के लिए जगह होगी कि, हमारे पसंदीदा ब्राउज़र, - IE गलत तरीके से कोड प्रदर्शित करता है, हालांकि, हम इसके लिए उपयोग किए जाते हैं।