- 元素選擇器
p{
}
- ID選擇器
#id{
}/*id爲屬性值*/
- 類選擇器
.class{
}/*class爲屬性值*/
- 選擇器分組（並集選擇器）
選擇器1,選擇器2,選擇器n{
}/*中間用,隔開*/
- 複合選擇器（交集選擇器）
選擇器1選擇器2選擇器n{
}/*中間無任何東西*/
- 通配選擇器
*{
}/*通配選擇器的優先級最低*/
- 後代元素選擇器
祖先 後代{
}
- 子元素選擇器
父元素>子元素{
}
- 僞類選擇器
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
/*順序不能變，同一優先級會出現覆蓋現象*/
- 僞元素選擇器
p:first-letter{
}/*爲p中的第一個字符設置樣式*/
p:first-line{
}/*爲p中的第一行設置樣式*/
- 屬性選擇器
[title]{
}/**/
p[title]{
}/*交集選擇器和屬性選擇器同時使用，表示p標籤還要有title屬性*/
p:[title=”hello“]{
}/*屬性值爲hello*/
p:[title^=“ab”]{
}/*表示屬性值以ad*/
p:[title$=“ab”]{
}/*屬性值中含有ab*/
- 子元素僞類
p:first-child{
}/*第一個p元素*/
p:last-child{
}/*最後一個p元素*/
p:nth-child(n){
}/*第n個p元素*/
p:first-of-type{
}/*第一個p元素*/
p:last-of-type{
}/最後一個p元素*/
p:nth-of-type(n){
}/*第n個p元素*/
/*可出現特殊值，例如n=odd，則爲奇數p元素，even爲偶數p元素*/
/*有type則不管p是不是父元素的第一個，均會選擇p，如果沒type且p不是父元素的第一個子元素，該css樣式不生效*/
- 後一個兄弟元素選擇器
span+p{
}/*嚴格遵守span後面是p*/
span~p{
}
/*span後的所有p元素*/
- 否定僞類
p:not(屬性值){
}/*p元素中除過某個屬性值其餘全選中*/
關於父子元素介紹
子元素：父元素下直接包含的元素
父元素：和子元素相對
祖先元素：包含的元素
後代元素：被包含的額元素
兄弟元素：擁有同一個父元素
繼承性介紹
祖先元素的樣式可以被後代繼承但與背景相關的樣式不會繼承
選擇器的優先級
內聯 1000
id 選擇器 100
類和僞類 10
元素 1
通配 0
當有多種選擇器時，則相加比較，選擇器的優先計算不會高於他的最大數量級，並集選擇器分開計算。
元素直接設置>內聯>外聯
