*
通用選擇器 -> 套用所有元素
* {color: yellow;}
<h1>
類型選擇器
h1 {color: red;}
id
#container {color: skyblue;}
class
.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
套用同一個設定。