交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如div.classname1

並集選擇器

各個選擇器通過逗號連線而成的。
div,p,.classname1,#id1{width:2px;}

後代選擇器

當標籤發生巢狀時，內層標籤就成為外層標籤的後代。
後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。
div p{}

<div>
    <p></p>
</div>

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連線。注意，符號左右兩側各保留一個空格。
div>p{} 這裡選擇的只有id=p1的p標籤。這裡的子 指的是 親兒子 不包含孫子 重孫子之類。

<div>
    <p id="p1">
        <p></p>
    </p>
</div>

測試題

<div class="nav">    <!-- 主導航欄 -->
  <ul>
    <li
 
><a href="#">公司首頁</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司產品</a></li>
    <li>
         <a href="#">聯絡我們</a>
         <ul>
                    <li><a href="#">公司郵箱</a></li
 
>
                    <li><a href="#">公司電話</a></li>
         </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 側導航欄 -->
  <div class="site-l">左側側導航欄</div>
  <div class="site-r"><a href="#">登入</a></div>
</div>

在不修改以上程式碼的前提下，完成以下任務：

1.連結 登入 的顏色為紅色,同時主導航欄裡面的所有的連結改為橙色
2.主導航欄和側導航欄裡面文字都是14畫素並且是微軟雅黑
3.主導航欄裡面的一級菜單鏈接文字顏色為綠色

參考：

    <style>
       .site-r a {
          color: red;
       }
       .nav a {  /*後代選擇器*/
          color: orange;
       }

       .nav, .sitenav {   /*並集選擇器*/
            font: 14px "微軟雅黑";
       }
       .nav> ul > li > a {  /*子代選擇器*/
        color: green;   /*123123123  */
       }
    </style>

偽類選擇器

偽類選擇器用於向某些選擇器新增特殊的效果。
語法
:hover{}

連結偽類選擇器

a:link {color: #FF0000}     /* 未訪問的連結文字顏色 */
a:visited {color: #00FF00}  /* 已訪問的連結文字顏色 */
a:hover {color: #FF00FF}    /* 滑鼠移動到連結上時文字的顏色 */
a:active {color: #0000FF}   /* 選定的連結文字顏色 */