How to Create a personalized link style using the CSS Selector

When designing a website, we sometimes need to make different styles Based on the properties of the page elements. For example, different link icons are displayed for different link types. CSS selector is a very useful technique. Through them, we can easily implement some effects. Today, we will introduce the CSS attribute selector by creating a personalized link style.

Let's take a look at the demo:

As we can see in, we define different styles for each link: When the href attribute value of link a is "mailto" mail link, an email icon is displayed behind the link. When the link is a word file, the word document icon is displayed behind it. When the link address is mp3, the music playing icon is displayed; when the link address contains "qianduan.net", a home page icon is displayed ......

In fact, it is very easy to implement such a function. Let's take a look at the syntax of the CSS attribute selector:

Syntax	Usage	Css version
[Att = val]	Element whose attribute "att" value is "val"	Css 2.1
[Att]	Elements that contain the "att" attribute	Css 2.1
[Att | = val]	Matches all att attributes with values separated by font numbers (hyphen-separated), and an Eelement whose values start with "val", which is mainly used for the lang attribute, for example, "en", "en-us", and "en-gb"	Css 2.1
[Att ~ = Val]	Matches all att attributes with values separated by multiple spaces, and an Eelement whose values are equal to "val"	Css 2.1
[Ns | attr]	The "attr" attribute element in the namespace, which is not commonly used.	Css 3
[Att ^ = val]	The value of the attribute att is "val"StartElement	Css 3
[Att * = val]	The value of the attribute att contains elements of the "val" string.	Css 3
[Att $ = val]	The value of the attribute att is "val"EndElement	Css 3

It should be noted that the CSS selector supports both CSS 2.1 and CSS 3, IE7, and IE8, as well as webkit, Gecko core, and Opera,Only browsers under IE6 are not supported.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page