Sometimes we may want internal links to display different styles, such as external links. I want to add a small icon next to the link to indicate that it is an external link and tell the visitors to confirm whether the link is opened in a new window or in this window. We may do this:
| The code is as follows: | Copy code |
| . External { Background: url (images/external.gif) no-repeat right top; Padding-right: 12px; } |
|
Then apply the CSS to each external link. Of course, this is not a problem, but it is too cumbersome.
Is there a good way to implement it? Yes. You can select attributes in CSS3, but this method is not supported in IE6 or earlier versions and has been implemented in FireFox.
The basic syntax of the property selector is: [att ^ = val]
For example:
| The code is as follows: | Copy code |
| A [href ^ = "http: //"] { Background-image: none; Padding-right: 0px; } |
|
All links starting with http: // are found, and background images are excluded. With the above attributes, it is easy to do.
| The code is as follows: | Copy code |
| <Style type = "text/css"> A { Background: url(external.gif) no-repeat right top; Padding-right: 14px; Font-size: 12px; } A [href ^ = "http: //"] { Background-image: none; Padding-right: 0px; } </Style> |
|
Add the icon to all links and remove the link icon starting with http: //. In this way, the external link display icon is implemented, and the internal link does not display the icon.
Note: for firefox, IE will not work.
| The code is as follows: | Copy code |
| <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Title> new document </title> <Meta name = "generator" content = "editplus"/> <Meta name = "author" content = ""/> <Meta name = "keywords" content = ""/> <Meta name = "description" content = ""/> <Style type = "text/css"> A { Background: url (/img/external.gif) no-repeat right top; Padding-right: 14px; Font-size: 12px; } A [href ^ = "http: //"] { Background-image: none; Padding-right: 0px; } </Style> </Head> <Body> <A href = "http: //"> </a> <br/> <A href = "http://www.111cn.net/"> 163.com</a> <br/> </Body> </Html> |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
