CSS 選擇器筆記
*
通用選擇器 -> 套用所有元素
1 | * {color: yellow;} |
類型選擇器
1 | h1 {color: red;} |
id
1 | #container {color: skyblue;} |
class
1 | .span2 { color: hotpink;} |
屬性
過濾對應標籤元素中的屬性 <a rel="friend" href="http://www.w3c.com/">w3c</a>
a[rel='friend'] {color: blue;}
a[attr=’value’]
全部都要符合。
a[attr*=’value’]
只要有包含 value 都會被選中。
a[attr^=’value’]
只要開頭有都會被選中。
a[attr$=’value’]
只要結尾有 value 都會中。
a[attr~=’value’]
以空格隔開的字串清單中，符合的就會中。
a[attr|=’value’]
以 - 隔開的字串清單中，如果開頭包含字串 value 。需要注意的是下圖 f 沒有被選中。
div p
div 裡面的 p 都會被選中。
div > p
只有 div 內第一階的子元素會被選中。
div + ul
跟 div 同階層並緊跟著 div 後面的 ul 才會被影響。
div ~ p
div 同階層後面所有的 p。
a, em
套用同一個設定。