CSS Attribute Selector

身為毫無美感可言的 PG 比起 C# 更畏懼 CSS
因為怎麼弄都很醜
久而久之 CSS 只會弄弄顏色 改改大小
直到 J蛞蝓 問世 可以用 CSS Selector 來選元素 根本神技術
這時候就發現當年老師在教 CSS 我沒有在聽 現在很多時候繞了一圈選元素 根本多餘
別人我不知 小弟本身 就是 ID 跟 CLASS 打天下
選不到的 就給他 ID 跟 CLASS 有何不可
但是有時候 元素的差異是在 Attribute 以前我都是 if ($('#OOXX').attr('fooAttr') == ??)
直到我看了 wikipedia 我才大澈大悟 根本沒有善用 J蛞蝓 - 使用 CSS Selector 這個強大之處

以下引用自 http://zh.wikipedia.org/wiki/層疊樣式表

選擇器

於CSS裡現在共有5種基本選擇器（Basic Selectors）︰^[1]

• 元素名稱 —— elementname
• class —— .elementname
• id —— #elementname
• 通用（所有） —— * ns|* *|*
• 屬性 —— [attribute]

屬性裡共有7種，如下︰

代碼	意思
[attribute]	元素有attribute的屬性。
[attribute="value"]	屬性attribute裡是value
[attribute~="value"]	屬性attribute裡使用空白分開的字串裡其中一個是value
[attribute|="value"]	屬性attribute裡是value或者以value-開頭的字串
[attribute^="value"]	屬性attribute裡最前的是value
[attribute$="value"]	屬性attribute裡最後的是value
[attribute*="value"]	屬性attribute裡有value出現過至少一次

[編輯]組合選擇器

於CSS里現在共有4種組合選擇器（Combinators）：

• 下層元素 —— A B，選擇於下層的元素B 後代選擇器
• 相鄰元素 —— A + B，選擇相鄰的元素B（不能被任何元素相隔）相鄰同胞選擇器
• 同父層元素 —— A ~ B，選擇同父層的元素B
• 子層元素 —— A > B，選擇下一層的元素B 子選擇器將樣式作用於元素的直接後代

[編輯]偽元素選擇器

偽元素是於CSS裡製造出來的假HTML元素。現在於CSS裡共有5種偽元素選擇器（Pseudo-elements）︰

• :after 或 ::after
• :before 或 ::before
• :first-letter 或 ::first-letter
• :first-line 或 ::first-line
• ::selection

[編輯]偽類選擇器

偽類是選擇元素不同的狀態，如被按下或鼠標在元素上面。目前共有很多不同的偽類選擇器，如︰

• :link —— 超連結未被存取
• :visited —— 超連結被存取過
• :hover —— 鼠標在元素上面
• :active —— 鼠標在元素上按著
• :focus —— 焦點在元素上
• :target —— 元素被URL標記