大多數的 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>
