CSS選擇器分類:
CSS的選擇器分類可以分為三大類:id選擇器,類選擇器,標簽選擇器。
用法如下:
| 選擇器 | e.g. | 說明 | |
| id選擇器 | #id | #header | 選擇id="header"的所有元素 |
| 類選擇器 | .class | .message | 選擇class="message"的所有元素 |
| 標簽選擇器 | el | div | 選擇所有的div元素 |
其中他們又可以以不同的方式進行組合,如下:
| 選擇器 | e.g. | 說明 | |
| 后代選擇器 | el el | div p | 選擇div元素內部的所有p元素 |
| 子代選擇器 | el>el | div>p | 選擇div元素的第一子代的所有p元素 |
| 相鄰兄弟選擇器 | el+el | .msg+p | 選擇與class為"msg"的元素同級且緊跟其后的第一個p元素 |
| 通用兄弟選擇器 | el~el | .msg~p | 選擇class為"msg"的元素后面的所有p元素 |
| 群組選擇器 | el,el | p, span, .blue,#box | 選擇所有的p元素、span元素、class為"blue"的元素以及id為"box"的元素 |
| 偽類選擇器 | :link :visited :hover :active :focus |
a:hover | 選擇鼠標指針位於a標簽之上的鏈接 |
| 偽元素選擇器 | :before :after |
p:before | 在每個p元素內容之前插入內容 |
| 屬性選擇器 | [attribute] | [target] | 選擇帶有target屬性的所有元素 |
| 通用選擇器 | * | * | 選擇所有的元素 |
優先級:!important > 內聯樣式 > id選擇器 > 類、偽類、屬性選擇器 > 標簽、偽元素選擇器
權 重: !important:10000
內聯: 1000
id選擇器:100
類、偽類、屬性選擇器:10
標簽、偽元素選擇器:1
通用選擇器(*)、子選擇器(>)、相鄰兄弟選擇器(+)、通用兄弟選擇器(~)權重值為0
