Create link styles with icons using CSS selector

When designing a website, we sometimes need to create different styles based on the attributes of the page elements, for example, for different link types, different link icons are displayed. CSS selectors are a very useful technique, through them, we can easily achieve certain effects. Today we will introduce the property selector of CSS by creating a personalized link style.

Let's take a look at the demonstration first:

As can be seen in the above figure, we define a different style for each link: when the value of the href attribute of link a is "mailto" mail link, an icon of the email is displayed behind the link; when the link is When the word file is used, the word document icon is displayed behind it; when the link address is mp3, the music playback 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 first look at the syntax of CSS’s property selector:

It should be noted that IE7 and IE8 support CSS selector regardless of CSS 2.1 or CSS 3 version, and webkit, Gecko core and Opera also support it. Only browsers below IE6 are not supported.

OK, let's implement these styles:

1. Basic style of link First we prepare a CSS Sprites image, and we integrate all the icons into this a.gif.

In this way, we define the default style for all links, and a small red arrow icon will be displayed on the right side of all links.

2. Define personalized styles. Now we will define their own styles for various types of links. In fact, what we need to do at this time is to define different background image positions (background-position):

mailtomailto mail links are in the style of href="mailto:[email protected]". The value of their href attribute starts with mailto. Then we use the format [att^=val]:

We generally believe that all doc file links are in the format of href="abc.doc", which means that the link address ends with .doc, so we need to use the format of [att$=val]. The style is as follows:

Documents in PDF, excle, mp3 formats are also implemented in this way.

Links containing qianduan.net fields For links containing a certain string, you can use [att*=val]:

And when we use it, we don't need to add an extra class: