CSS 屬性選擇器-新手入門篇

大多數的 HTML 標籤都包含相對多組的屬性,例如常見的連結 a 標籤可以加 href、style、target、title 等屬性,而 CSS 屬性選擇器可以讓 CSS 依屬性的差異給予該標籤不同的設定,這樣做一來可以減少 class 或 id 的使用,讓 HTML 更加精簡好閱讀,二來可以增加維護的便利性,三來可以更便利的控制網頁上的每個元素,好處不少。

使用條件:

  • 需設定 !DOCTYPE
  • IE 7+

使用方式:

方法:標籤名稱[屬性名稱]{...}

舉個例子,假設我們要設定一個文字連結,並給它一個黃色的底來強調它,一般我們會用 style、id 或 class 的方式設定,如下:

傳統以 style 的設定
<a href="http://tt5.org" target="_blank" style="background:yellow;">tt5.org</a>

但如果選擇使用 CSS 屬性選擇器的話,方式如下:

CSS
a[href]{
    background: yellow;
}
HTML
<a href="http://tt5.org" target="_blank">tt5.org</a>

依屬性值的差異給予不同的設定

說明:有時候我們會遇到數組相同的標籤,我們需要依標籤屬性的值來決定要用什麼樣的設定,例如要給數個連結到不同網站的 a 標籤,設定不同的背景色...

方式:標籤[屬性名稱="屬性值"]{...}

下面是例子:

CSS
a[href="http://tt5.org"]{
    background: red;
}
a[href="https://tw.yahoo.com"]{
    background: green;
}
a[href="http://yam.com.tw"]{
    background: blue;
}
HTML
<a href="http://tt5.org" target="_blank">tt5.org</a>
<a href="https://tw.yahoo.com" target="_blank">台灣雅虎</a>
<a href="http://yam.com.tw" target="_blank">Yam</a>

搭配任意值

說明:有時候我們只知道屬性中的部分值,你可以用 * 來表示這種情況

方式:標籤[屬性名稱*="屬性值"]{...}

例如:我們要在下面的連結中,取出 href 屬性中有 tt5 的連結

CSS
a[href*="tt5"]{
    background: yellow;
}
HTML
<a href="http://tt5.org" target="_blank">tt5.org</a>
<a href="https://tw.yahoo.com" target="_blank">台灣雅虎</a>
<a href="http://yam.com.tw" target="_blank">Yam</a>

比對屬性值的開頭

說明:比較屬性值的開頭是否相同,你可以用 ^ 來表示這種情況

方式:標籤[屬性名稱^="屬性值"]{...}

例如:我們要在下面的連結中,為 https 的連結加上底色

CSS
a[href^="https"]{
    background: yellow;
}
HTML
<a href="http://tt5.org" target="_blank">tt5.org</a>
<a href="https://tw.yahoo.com" target="_blank">台灣雅虎</a>
<a href="http://yam.com.tw" target="_blank">Yam</a>

比對屬性值的結尾

說明:與前一個剛好顛倒過來,它可以比較屬性值的結尾是否相同,你可以用 $ 來表示這種情況

方式:標籤[屬性名稱$="屬性值"]{...}

例如:我們要在下面的連結中,為 .tw 的連結加上底色

CSS
a[href$=".tw"]{
    background: yellow;
}
HTML
<a href="http://tt5.org" target="_blank">tt5.org</a>
<a href="https://tw.yahoo.com" target="_blank">台灣雅虎</a>
<a href="http://yam.com.tw" target="_blank">Yam</a>

比對以空格區分的詞組

說明:為了 CSS 的優化,我們常常會給 class 的標籤設為多組設定,像是 <p class="line color">Example</p>,這時我們就可以透過 ~ 的方式比對以空格區分開來的特定詞組

方式:標籤[屬性名稱~="屬性值"]{...}

例如:我們要在下面的 p 標籤的 class 中,為有包含 yellow 的標籤加上底色

CSS
p[class~="yellow"]{
    background: yellow;
}
HTML
<p class="line yellow">Example</p>
<p class="line red">Example</p>
<p class="line blue">Example</p>

比對以連字符號區分的詞組

說明:這個效果和上面的有點雷同,差別在於上面的以空格區分不同的詞組,而 | 則以連字符號 - 來區分不同的詞組,且必需是位於字首,例如:layout-left; layout-right 的 layout-...

方式:標籤[屬性名稱|="屬性值"]{...}

例如:我們要在下面的 p 標籤的 class 中,為有開頭有包含 color 的標籤加上底色

CSS
p[class|="color"]{
    background: yellow;
}
HTML
<p class="color-yellow">Example</p>
<p class="color-blue">Example</p>
<p class="color-red">Example</p>

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料