選擇器
選擇器 {
樣式
}
元素選擇器
p {
font-size: 12px;
}
ID 選擇器
#id {
font-size: 12px;
}
Class 選擇器
.classname {
font-size: 12px;
}
所有元素
* {
font-size: 12px;
}
ElementElement
選擇所有 有.class1 又同時有.class2 元素
.class1.class2 {
font-size: 12px;
}
Element,Element
選擇所有 div 元素和所有 p 元素
div,
p {
font-size: 12px;
}
Element Element
選擇所有 div 元素 下面的所有 p 元素（子孫）
div p {
font-size: 12px;
}
Element>Element
選擇所有 div 元素 下面一層的所有 p 元素（子）
div > p {
font-size: 12px;
}
Element+Element
選擇所有 div 元素 後面的所有 p 元素（子）
div + p {
font-size: 12px;
}
[attribute=value]
選擇屬性
[target="_blank"] {
font-size: 12px;
}
:before 和 :after 偽元素
在前面（或後面）加入內容
:nth-child(n)
選擇第幾個
nth-child(odd) 和 nth-child(even)
選擇奇數、偶數
權重
究竟會吃到哪個 css 樣式呢？
- 後寫的樣式會蓋掉前面的樣式
- 權重分數
- !important > style > #id > .class > element