Sivan's Blog - 失心瘋

最近读《精通CSS》一书，学了不少知识。前两天给博客的链接添加了一些样式，因为本身博客主题的链接就不怎么显眼，这样也是想给读者更多方便，同时让博客的样式更加丰富好玩。

我根据不同的链接，设定了不同的显示效果，如下图。


本来这些如果都用class实现可能也不麻烦，但是每次添加链接都要设定一个类很累。所以我用CSS里的“属性选择器”来通过rel来给链接赋予不同效果。需要注意的是，IE6并不支持这些代码，应避免将这类代码用在重要功能上。如果要兼容IE6只能结合class来实现。

链接分类图里，external是让链接在新窗口打开，相比使用target="_blank"这样符合W3C的标准。用代码实现起来很简单（不然我就不用这代码了 🙂 ）。

a[rel~="external"] {
background:url(images/icon_link.gif) no-repeat;
padding-left:16px;
}
.attachment {
background:url(images/icon_attachment.gif) no-repeat !important;
padding-left:16px;
}

第一句是给所有rel属性包含external的链接添加一个小图标。如果你的页面还在用target="_blank"属性，最好自己修改为rel="external"这样。修改教程请见Shawn的教程。不然请用这样的代码

a[target="_blank"] {
background:url(images/icon_link.gif) no-repeat;
padding-left:16px;
}

第二句由于附件也有external属性，所以给附件.attachment的background加了一个!important。
这样链接基本不用管，只需要给附件链接添加一个class="attachment"属性就可以啦。

还有一点，要给css指向比较详细的路径，不然所有链接都将应用这个样式。
我是用下面的代码，这个代码只适用于我自己的主题

#wrapper #frame #content #left .entry .post p a[rel~="external"],
#wrapper #frame #content #left .entry .post > ul a[rel~="external"],
#wrapper #frame #content #left .entry .post > quote a[rel~="external"],
#wrapper #frame #content #left .entry .post > ol a[rel~="external"] {
background:url(images/icon_link.gif) no-repeat;
padding-left:16px;
}
#wrapper #frame #content #left .entry .post p .attachment,
#wrapper #frame #content #left .entry .post > ul .attachment,
#wrapper #frame #content #left .entry .post > quote .attachment,
#wrapper #frame #content #left .entry .post > ol .attachment {
background:url(images/icon_attachment.gif) no-repeat !important;
padding-left:16px;
}

好了，就写这么多，哪里没说明白我再继续补充。