css| Skills | link | design | Web Page design Sometimes we may want internal links to display different styles from external links, such as external links. I want to add a small icon next to the link to indicate that it is an external link that tells the caller to confirm whether it is open in a new window or in this window. We might have done this:
. external
{
Background:url (images/external.gif) no-repeat right top;
padding-right:12px;
}
Then give each external link to use the CSS, of course, this is not not not, but too cumbersome.
Is there any good way to achieve it? Yes. You can take advantage of the attribute selection in CSS3, but this method is not supported in IE6 and the following versions are already implemented in Firefox.
The basic syntax for the property selector is: [Att^=val]
For example:
A[href^= "Http://www.webjx.com"]
{
Background-image:none;
padding-right:0px;
}
Finds all links that start with http://www.webjx.com and excludes background pictures. With the above attributes, it is good to do.
<style type= "Text/css" >
A
{
Background:url (external.gif) no-repeat right top;
padding-right:14px;
font-size:12px;
}
A[href^= "Http://www.webjx.com"]
{
Background-image:none;
padding-right:0px;
}
</style> first to all the links with the icon, and then remove the beginning of the http://www.webjx.com link icon, so that the implementation of the external link Display icon, the internal link does not display the icon.
Note: Firefox applies, IE is not.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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://www.webjx.com"]
{
Background-image:none;
padding-right:0px;
}
</style>
<body>
<a href= "http://www.webjx.com" >webjx.com</a><br/>
<a href= "http://www.163.com/" >163.com</a><br/>
</body>
