css基礎選擇器
基礎選擇器的作用：
1. 作用：
規範了頁面中哪些元素能夠使用定義好的樣式
目的： 匹配頁面元素
基礎選擇器的分類：
一. 通用選擇器、 元素選擇器、 類選擇器、 ID選擇器、
羣組選擇器、後代選擇器、 子代選擇器、 僞類選擇器.
1.通用選擇器：
作用：
匹配頁面中所有的元素
語法：
*{樣式聲明;}
通用選擇器的缺點:
效率較低，儘可能少用。
ex（例子）：
網頁中div文字顏色爲橘黃色
命令顯示：
網頁示例圖：
2. 元素選擇器：
作用：
定義頁面某一標籤的默認樣式
語法：
元素{
樣式聲明；
}
ex(例子)：
頁面上所有的div文字大小爲12px，文字顏色爲橘黃色
頁面上所有的span元素顏色爲紅色
命令顯示圖
網頁實例顯示圖
3. 類選擇器
作用：
由css定義好，可以被任意標記的class屬性值進行引用的選擇器。
語法：
.類名{樣式聲明;}
類名：
1. 不能以數字開始
2. 除_,-意外不能有其它特殊符號
引用：
引用方式 - 多類選擇器的引用
可以將多個類選擇器，同時應用在一個元素中
語法： <ANY class=“class1 class2 class3”>
定義方式 - 分類選擇器的定義:
將元素選擇器和類選擇器結合起來使用，從而實現對某種元素不同
樣式的細分控制
語法：
元素選擇器.類選擇器{樣式聲明}
ex（例子）：
1.p.redColor{}
定義 class redColor爲的p元素的樣式
命令顯示圖：
網頁示例圖：
ID選擇器：
作用：
針對指定ID值的元素去定義樣式
語法：
#ID值{樣式聲明}
ID值，一定要對應某個元素的ID值
ex（例子）：
定義頁面中 id爲header 的元素 的文字大小爲 30pt，背景顏色爲 orange色
定義頁面中 id爲main的元素文字大小18pt， 加粗顯示（font-weight：bold）
2.定義頁面中 id爲img_list 的元素背景顏色爲綠色，斜體顯示文字（屬性：
font-style，值： italic）
命令顯示圖：
網頁示例圖：
5. 羣組選擇器
作用:
選擇器生命是以（，）隔開的選擇器列表
語法：
選擇器1，選擇器2，選擇器3，…{}
ex（例子）：
span，.important,#main,div.redColor{
color:red;
font-size:12px;
}
頁面中的所有的span，以及class爲important的元素，
id爲main的元素以及class爲redColor的div元素，
它們的樣式爲 color：red,font-size:12px;
命令顯示圖：
網頁示例圖：
6. 後代選擇器
後代：
只要具備層級關係的元素，被嵌套的都可以稱之爲 後代元素
語法：
選擇器1 選擇器1，選擇器2，{樣式聲明;}
ex(例子)：
1. #d1 span{}
作用： 匹配id爲d1中的 所有的span
命令顯示圖：
網頁示例圖：
7. 子代選擇器：
子代：
只具備一級層級關係的元素，被嵌套的稱之爲 子代元素
語法：
選擇器1，選擇器2，{樣式聲明}
8. 僞類選擇器
作用：
匹配頁面元素的不同狀態的選擇器
分類：
1. 鏈接僞類：
1. ：link，匹配尚未被訪問的超鏈接狀態
2. ：visited，匹配訪問後的超鏈接的狀態
推薦使用方式：
元素：僞類{}
匹配id爲anchor的元素爲被訪問時的樣式
#anchor：link{}
匹配頁面中id爲myAn元素的訪問過後的狀態
#myAn：visited{}
a:link{
}
2. 動態僞類：
1. :hover 匹配鼠標懸停在元素上的狀態 （重點）
2. ：active 匹配元素被激活時的狀態
3. ：focus 匹配元素獲取焦點時的狀態（test，password，textarea）
3. 目標僞類
4. 元素狀態僞類 .
6. 結構僞類
8. 否定僞類
選擇器的優先級：
示例圖：
命令顯示圖：
網頁示例圖：
命令顯示圖：
網頁示例圖：
