1、標籤選擇器：指使用HTML的某個標籤。

p{color:blur;font-size:14px;}

2、ID選擇器：首先給要新增樣式的標籤設定一個唯一的ID名稱，然後在css中使用“#”來定義樣式

#menu{
   	background-color: #808080;
   	color: #fff;
  	font-size: 36px;
 }
<nav id="menu">
   <ul>
      <li>新聞資訊</li>
      <li>娛樂天地</li>
      <li>體育競技</li>
      <li>文化傳媒</li>
   </ul>
 </nav>
 

3、class選擇器：就是給要新增樣式的標籤加上一個類名，關鍵字 class，class選擇器可以在多個元素中使用，在css中類選擇器以一個點“.”符合顯示

.test1{
    font-size:14px;
    font-weight: bold;
}
<p class="test1">啦啦啦啦啦</p>

4、並集選擇器：就是多個標籤選擇器，但要使用逗號 “，”隔開

header,main{
    		border: 1px solid black;
    		width:600px;
            height:200px;
    		margin: 0 auto;
    	}
<header>
    內容
</header>
<main>
    內容
</main>
 

5、後代選擇器：多個選擇器以空格分開，組合成包含關係，且右邊的選擇器從屬於左邊，即右邊的選擇器只能在左邊的選擇器範圍內選擇

#menu h1{
  color:red;
}
<div id="menu">
    <h1 class="test1">商品分類</h1>
    <ul>
       <li class="test1">家用電器</li>
       <li>日用百貨</li>
       <li>家紡用品</li>
       <li>電子產品</li>
     </ul>
</div>
 

6、子元素選擇器：匹配第一個元素的直接後代

.food>li{
   	border: 1px solid red;
}
<ul class="food">
        <li>
            水果
            <ul>
                <li>香蕉</li>
                <li>蘋果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>
            蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>捲心菜</li>
            </ul>
        </li>
    </ul>

7、兄弟選擇器：相鄰兄弟選擇器可選擇緊接在另一元素後的元素，且二者有相同父元素。

.p1 +p{
    color: blue;
}
<div class="test1">
    <h1>山東省景點</h1>
    <p id="p1">五嶽獨尊-泰山</p>
    <p>孔孟之鄉-濟寧</p>
    <p class="p2">江北水城-聊城</p>
    <p>人間仙境-蓬萊</p>
</div>


結果為：孔孟之鄉-濟寧

8、偽類選擇器：

        :link選擇器 選擇未訪問連結元素         :visited選擇器 選擇已訪問的連結元素         :hover選擇器 滑鼠懸停在其上的元素         :active選擇器 被使用者啟用的元素，通常意味著使用者即將點選該元素

       如果同時同時寫四個偽類選擇器，順序必須為：link -> visited -> hover -> active

a:link{
    color: #000;
    text-decoration: none;
}
/*訪問後樣式*/
a:visited{
    color: #000;
}
/*滑鼠移到超連結樣式*/
a:hover{
    color: red;
}
/*滑鼠點選時樣式*/
a:active{
    color: yellow;
}
<a href="#">百度</a><br />
<a href="#">新浪</a><br />

9、屬性選擇器：對帶有指定屬性的 HTML 元素設定樣式

a[href="#"]{
   	color: red;
   	font-size: 25px;
}
<a href="#" title="百度">百度一下</a><br />