内容简介：一個常見的需求，由於不算視覺部分，直覺要使用 JavaScript 處理，其實 CSS 就能解決。CSS 3
一個常見的需求，由於不算視覺部分，直覺要使用 JavaScript 處理，其實 CSS 就能解決。
Version
CSS 3
Image by File Extension
若 file extension 為 pdf ，則顯示 pdf.svg ；若為 doc ，則顯示 word.svg 。
若使用 JavaScript 當然可行，可能完全使用 CSS 實現嗎 ?
Attribute Selector
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Image by Extenstion</title>
<style>
.download a {
display: block;
padding-left: 30px;
}
.download a[href $= '.pdf'] {
background: url('pdf.svg') no-repeat;
}
.download a[href $= '.doc'] {
background: url('word.svg') no-repeat;
}
</style>
</head>
<body>
<div class="download">
<a href="aaa.pdf">aaa.pdf</a>
<a href="bbb.doc">bbb.doc</a>
</div>
</body>
</html>
21 行
<div class="download"> <a href="aaa.pdf">aaa.pdf</a> <a href="bbb.doc">bbb.doc</a> </div>
很平凡地將兩個 <a> 包在 <div> 內。
第 6 行
.download a {
display: block;
padding-left: 30px;
}
-
<a>是 inline element，為了使其並排，將display設定為block - 圖片將使用
background-image呈現，故特別將<a>設定padding-left用來顯示圖片
11 行
.download a[href $= '.pdf'] {
background: url('pdf.svg') no-repeat;
}
Attribute selector 有個特色，就是能搭配 regular expression。
-
$=表示結尾是.pdf - 使用
background一次設定檔案位置與no-repeat
15 行
.download a[href $= '.doc'] {
background: url('word.svg') no-repeat;
}
大部分情況下，使用 background 是方便的，它讓我們一次設定多個 property。
但在這種使用情境下，我們卻必須 重複 設定 no-repeat 。
Refactor CSS
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Image by Extenstion</title>
<style>
.download a {
display: block;
padding-left: 30px;
background-repeat: no-repeat;
}
.download a[href $= '.pdf'] {
background-image: url('pdf.svg');
}
.download a[href $= '.doc'] {
background-image: url('word.svg');
}
</style>
</head>
<body>
<div class="download">
<a href="aaa.pdf">aaa.pdf</a>
<a href="bbb.doc">bbb.doc</a>
</div>
</body>
</html>
第 6 行
.download a {
display: block;
padding-left: 30px;
background-repeat: no-repeat;
}
將共用的 no-repeat 重構到 .download a ，如此 no-repeat 只要寫一次即可。
13 行
.download a[href $= '.pdf'] {
background-image: url('pdf.svg');
}
改用 background-image ，只設定 檔案位置 即可。
17 行
.download a[href $= '.doc'] {
background-image: url('word.svg');
}
不需再重複 no-repeat 。
Conclusion
- 善用 Attribute selector 的 regular expression，如此就不必使用到 JavaScript
- 當 property 重複設定時，可改設定到上層 selector
Reference
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Excel图表之道
刘万祥 / 电子工业出版社 / 2010年4月 / 59.00元
本书介绍作者在实践工作中总结出来的一套“杂志级商务图表沟通方法”，告诉读者如何设计和制作达到杂志级质量的、专业有效的商务图表，作者对诸如《商业周刊》、《经济学人》等全球顶尖商业杂志上的精彩图表案例进行分析，给出其基于Excel的实现方法，包括数据地图、动态图表、仪表板等众多高级图表技巧。 本书提供大量图表模板源文件，包括详细的制作步骤，提供网上下载。提供博客支持。 本书定位于中高级Ex......一起来看看 《Excel图表之道》 这本书的介绍吧!
