（3）選擇元素——（7）為連結加樣式（Styling links）

Let's say we want to have different styles for different types of links. We first define the styles in our stylesheet, as follows:a { color: #00c; }a.mailto { background: url(images/mail.png) no-repeat right top; padding-right: 18px;}

我們想讓不同的連結有不同的顏色，我們首先在樣式表中定義樣式，如下：
To add a class for all links to PDF files, we use the dollar sign rather than the caret symbol. This is because we're selecting links with an href attribute that ends with .pdf為了給所有到PDF檔案的連結加上一個類，我們使用貨幣符號而不是脫字元號^。這是因為我們正在選擇一個href屬性是以.pdf結尾的連結，如下：to appear after each link to a PDF document, as shown in the following screenshot:
新添加的pdflink類的樣式規則在每一個到PDF檔案的連結後面加上了一個Adobe Acrobat表徵圖，正如下面的截屏顯示的那樣：Attribute selectors can be combined as well. We can, for example, add a henrylinkclass for all links with an hrefvalue that both starts with httpand contains henry anywhere:
$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]') 
.addClass('henrylink');
});
屬性選取器也可以串連使用，比如，我們可以為所有以http開頭，而且在某個位置含有henry的href屬性添加一個henrylink類：$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]') 
.addClass('henrylink');
});
With the three classes applied to the three types of links, we should see the following:

在這三個類添加到這三種連結以後，我們會看到下面這樣的介面：
In the preceding screenshot, note the PDF icon to the right of the Hamletlink, the envelope icon next to the emaillink, and the white background and black border around the Henry Vlink.