每一條css樣式宣告（定義）由兩部分組成，形式如下：
選擇器在{}之前的部分就是「選擇器」，「選擇器」指明了{}中的「樣式」的作用物件，也就是「樣式」作用於網頁中的哪些元素。
標籤選擇器其實就是html**中的標籤。如右側**編輯器中的、、、、
p上面的css樣式**的作用：為p標籤設定12px字型大小，行間距設定1.6em的樣式。
類選擇器在css樣式編碼中是最常用到的，如下面**編輯器中的**:可以實現為「膽小如鼠」字型設定為紅色。
語法：
.注意：類選器名稱
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，如下：
膽小如鼠第二步：使用class="類選擇器名稱"為標籤設定乙個類，如下：
class="stress"第三步：設定類選器css樣式，如下：>膽小如鼠
.stress/*類前面要加入乙個英文在很多方面，id選擇器都類似於類選擇符，但也有一些重要的區別：圓點*/
1、為標籤設定id="id名稱"，而不是class="類名稱"。
2、id選擇符的前面是井號
（#）號，而不是英文圓點
（.）。
學習了類選擇器和id選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？我們不要著急先來總結一下他們的相同點和不同點：
相同點：可以應用於任何元素
不同點：
1、id選擇器只能在文件中使用一次。與類選擇器不同，在乙個html文件中，id選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
下面**是正確的：
三年級時，我還是乙個class="stress">膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個class="stress">勇氣來回答老師提出的問題。而下面**是錯誤的：
三年級時，我還是乙個id="stress">膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個id="stress">勇氣來回答老師提出的問題。2、
可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。
我們可以為乙個元素同時設多個樣式，但只可以用類選擇器的方法實現，id選擇器是不可以的（不能使用 id 詞列表）。
下面的**是正確的(完整**見右側**編輯器)
.stress上面**的作用是為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px。.bigsize
到了class="stress bigsize">三年級下學期時，我們班上了一節公開課...
下面的**是不正確的(完整**見右側**編輯器)
#stressid上面**不可以實現為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px的作用。#bigsizeid
到了id="stressid bigsizeid">三年級下學期時，我們班上了一節公開課...
還有乙個比較有用的選擇器子選擇器
，即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側**編輯器中的**：
.food>li這行**會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側**編輯器中的**：
.first span這行**會使第一段文字內容中的「膽小如鼠」字型顏色變為紅色。
請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的
直接後代
，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於
所有子後代元素
。後代選擇器通過
空格來進行選擇，而子選擇器是通過「
>
」進行選擇。
總結：>
作用於元素的
第一代後代，
空格作用於元素的
所有後代。
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側**編輯器中的**：
.first span這行**會使第一段文字內容中的「膽小如鼠」字型顏色變為紅色。
請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的
直接後代
，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於
所有子後代元素
。後代選擇器通過
空格來進行選擇，而子選擇器是通過「
>
」進行選擇。
總結：>
作用於元素的
第一代後代，
空格作用於元素的
所有後代。
通用選擇器是功能最強大的選擇器，它使用乙個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面**使用html中任意標籤元素字型顏色全部設定為紅色：
*更有趣的是偽類選擇符，為什麼叫做偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中乙個標籤元素的滑鼠滑過的狀態來設定字型顏色：
a:hover上面一行**就是為 a 標籤滑鼠滑過的狀態設定字型顏色變紅。
關於偽選擇符：
關於偽類選擇符，到目前為止，可以相容所有瀏鑑器的「偽類選擇符」就是 a 標籤上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能相容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標籤上，比如說 p:hover，但是它們的相容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。
當你想為html中多個標籤元素設定同乙個樣式時，可以使用分組選擇符（，），如下**為右側**編輯器中的h1、span標籤同時設定字型顏色為紅色：
h1,span它相當於下面兩行**：
h1span
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...