CSS Seletor與jQuery Seletor

在CSS部份，先設計好你所要的樣式，我們這裡舉下載檔案的例子，我們常在網頁上放PDF等類型的檔案讓訪客下載，我們jQuery寫幾行簡單的Code，就可以幫我們處理好全部這類下載的樣式而不用我們一行一行class屬性的設定。
HTML部份：

<a href="kkbruce.blogspot.com" title="KingKong Bruce">Bruce</a> | <a href="KingKong.pdf" title="KingKong PDF file">KingKong PDF</a>

CSS部份：

.pdf {
  background-color: green;
  border: 1px solid #ABABAB;
  color: white;
}

jQuery部份：

$(function(){
  $('a[href$=".pdf"]).addClass('pdf');
  //a[]：屬性過濾
  //$=：結尾是…
  //addClass：加入Class
  //整句話：將a屬性href結尾是.pdf加入Class屬性為pdf
});

或是我們要為網站上的Link設定一個統一的樣式，也可以採用以下寫法，將CSS包在jQuery中：

$(function(){
  $('a[href$=".com"]').css({"background-color": "green",
  "border":"1px solid #ABABAB",
  "color":"white",
  "font-family":'"Verdana", "Courier New"', 
  "font-size": ".93em"});
  //css：加入css設定
  //特性：值
  //整句話：將a屬性href結尾是.com加入css設定(即style屬性)
});

以上只是透過一個簡單的jQuery屬性過濾功能，來針對href來進行過濾及設定。但其實jQuery的選擇器(Selector)是採用CSS Selector，所以相同的東西我們在CSS裡也可以這樣設定：

CSS部份：

a[href$=".pdf"] {
background-color: green;
border: 1px solid #ABABAB;
color: white;
}

這裡我連jQuery程式都沒有寫就完成了我想要的效果。這裡其實我想表達的有兩件事：

1. CSS能做到的事，不要拿jQuery來開刀。
2. jQuery就是拿來做有經濟效益的事，如動態效果、程式邏輯、AJAX…等。