| 類型 |
選擇器 |
例子 |
例子描述 |
| 全部選擇 |
* |
* {
color: red;
} |
選擇所有元素，文字顏色為紅色。 |
| id 選擇 |
#id |
#x {
color: red;
} |
選擇 id="x" 的所有元素，文字顏色為紅色。
id 在同一網頁內，只能唯一，不能同 id。 |
| class 選擇 |
.class |
.x {
color: red;
} |
選擇 class="x" 的所有元素，文字顏色為紅色。
class 在同一網頁內，可以很多同名 class。 |
| 標籤選擇 |
x |
x {
color: red;
} |
選擇所有標籤 <x> 元素內的文字為紅色。 |
| 排除選擇 |
x:not(selector) |
div:not(#y) {
color: blue;
}
|
選擇所有 <div> 元素內的文字是藍色，但是 id = "y" 除外。 |
| 緊接運算 |
element element |
x y{
color: blue;
} |
選擇標籤 <x> 內的 <y> 標籤內文字是藍色。
只有在 <x> 內的 <y> 內才有效。 |
| 屬性運算 : |
element:attribute |
a:link |
選擇所有未被訪問的鏈接。 |
| 屬性運算 [ ] |
[attribute] |
[target] |
選擇帶有 target 屬性所有元素。 |