I saw it last night. Let's record it today.
Sometimes we may want the internal link to display different styles from the external link.
For example, I want to add a small icon next to the external link to indicate that it is an external link to tell visitors and let them
In a new window or in this window.
We may do this:
. 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, but it has been implemented in Firefox.
The basic syntax of the property selector is as follows:
[ATT ^ = Val]
For example
A [href ^ = "http://www.lemongtree.com"]
{
Background-image: none;
Padding-Right: 0px;
}
Will look for all links starting with http://www.lemongtree.com and exclude background images
With the above attributes, it is easy to do
<Style type = "text/CSS"> <br/> A <br/> {<br/> Background: url(external.gif) No-repeat right top; <br/> padding-Right: 14px; <br/> font-size: 12px; <br/>}< br/> A [href ^ = "http://www.lemongtree.com"] <br/>{< br/> background-image: none; <br/> padding-Right: 0px; <br/>}< br/> </style>
Add all links first, and then remove the link icon starting with the http://www.lemongtree.com, so that the external link display
Icon. The internal link does not display the icon.
Note: For Firefox, ie will not work.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> new document </title> <br/> <meta name = "generator" content = "editplus"/> <br/> <meta name = "author" content = ""/> <br/> <meta name = "keywords" content = ""/> <br/> <meta name = "Description" content =" "/> <br/> <style type =" text/CSS "> <br/> A <br/>{< br/> background: URL (http://www.lemongtree.com/images/external.gif) No-repeat right top; <br/> padding-Right: 14px; <br/> font-size: 12px; <br/>}< br/> A [href ^ = "http://www.lemongtree.com"] <br/>{< br/> background-image: none; <br/> padding-Right: 0px; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <a href = "http://www.lemongtree.com"> lemongtree. com </a> <br/> <a href = "http://www.blueIdea.com/"> blueidea </a> <br/> </body> <br/> </ptml> <br/>
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
