用CSS属性选择器控制链接样式
有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接。我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开。我们可能会这样做:
.external
{
background:url(images/external.gif) no-repeat right top;
padding-right:12px;
}
然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐。
那有没有好的办法来实现呢?有。可以利用CSS3中的属性选择,但是在IE6及以下版本不支持该方法,在FireFox中已经实现了。
属性选择器的基本语法为:[att^=val]
例如:
a[href^="http://www.webjx.com"]
{
background-image:none;
padding-right:0px;
}
会查找所有以http://www.webjx.com开头的链接,并且排除背景图片。有了上面的属性,就好办了。
<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>
先给所有链接加上图标,然后去掉以http://www.webjx.com开头的链接图标,这样就实现了外部链接显示图标,内部链接不显示图标了。
注:firefox中适用,IE就不行了。
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
一、使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参
我们在webjx.com以前的文章中,曾经多次提到CSS命名的问题,有些朋友依然不够重视这些问题。认
在最近的项目中,我发现许多过于臃肿的网页。对于内联网中的网站而言,这一般不会造成什么问题。不过,当你
我最近的几篇专栏文章讨论了使用XHTML和CSS实现两列或三列页面布局的各个方面。到目前为止,所有例
在以前,为Web页面创建一个打印机友好的版本意味着要设计一个布局和格式都经过修改的单独页面,这样才能
margin是我们在进行CSS布局中非常常用的属性之一,但如果运用不得当,往往会产生过多的垃圾代码,
1、IE与Firefox下对CSS解析的区别对高度的解析IE:将根据内容的高度变化,包括未定义高度的
用DIV+CSS来写网站结构也有一段时间,在此过程中发现有时候需要把字体设置成比12px,而比14p
这是一个例了,不知道有没有更好的解决办法,贴上来,随便看吧! CSS: body{font-si
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网
<divstyle="width:400px"><divstyle="float:
1.单行文字 设置div的高度与文字的行高一样就可以了,即line-height和height的数
一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用
1.position:static|无定位position:static是所有元素定位的默认值,一般