相关文章
网站建设给光标添加CSS样式
网站设计用CSS属性选择器控制链接样式
网页设计在DIV+CSS排版中新闻列表的制作方法
网站设计导航上用CSS标志当前页效果的实现
网站建设网页设计中HTML常犯的五个错误
网站制作CSS滤镜:blur属性
网站建设flash制作广告全程实例
北京网站设计FLASH MX 2004视频教程:摩托罗拉手机广告制作(二)
网页设计4天学会 NoahWeb 表单 - 第二天
北京网站设计网页中多层效果的灵活使用
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网页设计用CSS属性选择器控制链接样式
北京网页设计用CSS属性选择器控制链接样式
有时我们可能希望内部链接与外部链接显示不同的样式，如外部链接。我想在链接的旁边加上一个小图标，以表示其是一个外部的链接，来告诉来访者，让他们来确认是在新窗口打开还是在本窗口打开。我们可能会这样做：
.external网站设计
{网站制作
background:url(images/external.gif) no-repeat right top;网站制作
padding-right:12px;网站制作
}
然后给每一个外部的链接应用该CSS，当然，这样做并不是不可以，只是太繁琐。
那有没有好的办法来实现呢？有。可以利用 网站制作CSS3中的属性选择，但是在IE6及以下版本不支持该方法，在FireFox中已经实现了。
属性选择器的基本语法为：[att^=val] 北京网页设计
例如：网站制作
a[href^="http://www.admin5.com"]北京网站设计
{网站建设
background-image:none;网站设计
padding-right:0px;网站制作
}
会查找所有以http://www.admin5.com开头的链接，并且排除背景图片。有了上面的属性，就好办了。
<style type="text/css">企通互联
a网站制作
{北京网页设计
background:url(external.gif) no-repeat right top;北京网站设计
padding-right:14px;北京网站设计
font-size:12px;北京网站建设
}北京网站制作
a[href^="http://www.admin5.com"]北京网站设计
{ 网页设计北京网站设计
background-image:none;网站建设
padding-right:0px;网站制作
}北京网站设计
</style>
先给所有链接加上图标，然后去掉以http://www.admin5.com开头的链接图标，这样就实现了外部链接显示图标，内部链接不显示图标了。
注：firefox中适用，IE就不行了。北京网站设计
<!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(/articleimg/2007/05/4701/external.gif) no-repeat right top;网页设计
padding-right:14px;网页设计
font-size:12px;北京网站设计
}网站制作
a[href^="http://www.admin5.com"] www.qitongnet.com企通互联
{北京网页设计
background-image:none; 北京网站设计北京网站建设
padding-right:0px;网站建设
}北京网站设计
</style>网页设计
</head>北京网站设计
<body>网站制作
<a href="http://www.admin5.com">BlueIdea</a><br />北京网站制作
<a href="http://www.lemongtree.com/">Lemongtree.Com</a><br />北京网站建设
</body>网站制作
</html>网站制作
北京网站建设网页设计
[Ctrl+A 网站设计全部选择 提示：你可先修改部分代码，再按运行]