一、選擇的順序。

Tips：在css中有同名規則會產生覆蓋，具體度越高，限定越精確的優先權越高。​

標籤選擇器；使用p{} ;

類名選擇器 ;  使用 .name{};

id 選擇器    ;  使用#id {};

1. 複合選擇器

div,p     選擇所有元素和所有元素。

2.層次選擇器

divp     選擇元素內部的所有元素。

3.多類選擇器：

一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。

This paragraph is a very important warning.

.important.warning{background:silver;}  ；

4.偽類選擇器：

1）：hover:選擇滑鼠指標浮動在其上的元素，並設定其樣式.

2）:focus ：選擇獲得焦點的input 元素。

提示：接收鍵盤事件或其他使用者輸入的元素都允許 :focus 選擇器。

<style type="text/css">

input:focus{background-color:yellow;}</style>

3）element>element​：

div>p   選擇父元素為div元素的所有p元素。

註釋：如果元素不是父元素的直接子元素，則不會被選擇。​即只有第一層元素會被選擇。

<style>
div>p
{
background-color:yellow;
}
</style>

<div><p>我是唐老鴨。</p>

          <p>我住在 Duckburg。</p>

</div>

<p>我最好的朋友是米老鼠。</p>

<div><span><p>我的樣式不會改變。</p></span></div>

4）:before :after

p:before   p:after

在每個p元素的內容之前/之後插入內容。

5）:not(selector)

:not(p)      選擇非p元素的每個元素。

li:not(p)

6)and so on.