1.交集選擇器

交集選擇器使用的方法是其中一個為HTML的標籤,另外一個是類選擇器,示例如下:

p.one  解釋: p是HTML中的<p>標籤 , .one 是一個類選擇器的書寫方式,

使用 <p class="one" > 123</p>

2.並集選擇器

多個選擇器用逗號分開,所有選擇器都能實現後面的樣式 ,示例如下:

a , p ,  .one , #id {}

3.後代選擇器

外層的標籤寫在前面,內層標籤寫在後面 ,示例如下:

div p {} 解釋 : div 標籤中 有 p標籤  比如 : <div> <p> </p> </div> 

PS:可以在前面加上類或者ID選擇器, 只要標籤上有該class 或者id屬性 ,選擇器的巢狀儘量不超過三級

4.子元素選擇器

語法:  .nav > li    大於號前後用空格分開, 表示只選擇第一層的子元素 ,如 .nav > li  只選擇 .nav下的li元素,  li  下的 元素不選擇  <ul class="nav" ><li> </li> </ul>

PS:實驗發現,如果不借助 class的屬性, 即父元素是類選擇器, 而是使用ul 即  ul 　>　li　則會連第三層也選擇上．

5.屬性選擇器

選擇具有特殊屬性的標籤

如 : 1)  a[title] {}  選擇 a標籤中有title屬性的進行樣式的改變

       2)  input[type=text] {}  選擇有特殊屬性,並且特殊屬性的值與給出值一樣的進行樣式改變

       3)  div[class^=font]  {}  ^= 表示以等號後面的值為開頭的值的選擇出來,進行css樣式改變

       4)  div[class$=font]   {}   $= 表示將等號後面的值作為結尾的標籤選擇出來,

       5)  div[class*=tao]   {}   *= 表示將等號後面的值,有與之匹配的找出來,不管哪個位置

PS:上述的前提是有該屬性的標籤,並且標籤中的屬性的值與上述相同的值

6.偽元素選擇器

語法:E::first-letter    解釋: E表示標籤 ,主要有以下幾種:

1) E::first-letter  表示第一個單詞

2) E::first-line   表示第一行

3) E::selection    選中文字後,文字的變換, 比如字型顏色的改變

4) E::before   E::after     花括號中必須有 content屬性 .在盒子的內部的前面或後面放內容

簡單使用: div::before { content: "a" ;}    <div> bc</div>   頁面輸出結果為 abc