Sometimes we may want internal links to display different styles than 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, to tell visitors and let them confirm whether to open in a new window or in this window. We might do this:
| The following is the quoted content: .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 impossible, but it is just too cumbersome.
So is there a good way to achieve it? have. You can use attribute selection in CSS3, but this method is not supported in IE6 and below. It has been implemented in FireFox.
The basic syntax of the attribute selector is: [att^=val]
For example:
| The following is the quoted content: a[href^="http://www.admin5.com"] { background-image:none; padding-right:0px; } |
All links starting with http://www.cz268.com.cn will be found and background images will be excluded. With the above attributes, it will be easier to handle
| The following is the quoted content: <style type="text/css"> a { background:url(external.gif) no-repeat right top; padding-right:14px; font-size:12px; } a[href^="http://www.cz268.com.cn"] { background-image:none; padding-right:0px; } </style> |
First add icons to all links, and then remove the link icons starting with http://www.cz268.com.cn. This will allow external links to display icons and internal links not to display icons.
Note: This is applicable to Firefox, but not IE.
| The following is the quoted content: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |