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’]


只要開頭有都會被選中。

Alt text

a[attr$=’value’]


只要結尾有 value 都會中。

Alt text

a[attr~=’value’]


以空格隔開的字串清單中,符合的就會中。

a[attr|=’value’]


- 隔開的字串清單中,如果開頭包含字串 value 。需要注意的是下圖 f 沒有被選中。

Alt text

div p


div 裡面的 p 都會被選中。

div > p


只有 div 內第一階的子元素會被選中。

div + ul


跟 div 同階層並緊跟著 div 後面的 ul 才會被影響。

div ~ p


div 同階層後面所有的 p。

a, em


套用同一個設定。

作者

andyyou(YOU,ZONGYAN)

發表於

2013-08-28

更新於

2021-12-12

許可協議