css選擇器的使用詳解

－、css選擇器的分類：

 

 

2、經常使用選擇器詳解：

　　一、標籤選擇器：

　　語法：

　　　　標籤名　{

　　　　　　屬性：屬性值;

　　　　}

　　代碼示例：

　　　　h1 {

　　　　　　color: #ccc;

　　　　　　font-size: 28px;

　　　　}

 

　　二、類選擇器:

　　　語法：

　　　　.類名　{

　　　　　　屬性：屬性值；

　　　　}

　　　代碼示例：

　　　　.top {

　　　　　　margin-top:25px;

　　　　}

　　　　<div class="top"></div>

　　三、id選擇器:

　　　語法：

　　　　#ID名稱　{

　　　　　　屬性：屬性值;

　　　　}

　　　代碼示例：

　　　#top {

　　　　padding-top:10px;

　　　}

　　　<div id="top"></div>

　　注意：ID屬性是惟一標識。

　　四、僞類

　　　語法：

　　　元素：僞類　{

　　　　屬性：屬性值；

　　　}

　　　代碼示例：

　　　a:link {

　　　　color:blue;

　　  }

　　五、並集選擇器：

　　　語法：

　　　標籤名，.類名，#ID名稱　{

　　　　屬性：屬性值;

　　　}

　　　代碼示例：

　　　p,.top,#title {

　　　　color:red;

　　　}

　　六、後代選擇器：

　　　語法：

　　　p span {

　　　　　屬性：屬性值;

　　　}

3、通用選擇器詳解：

 　　語法：

　　*{

　　　屬性：屬性值;

　　}

4、高級選擇器詳解：

　　一、子選擇器：

　　　　代碼示例：

　　　　#nav>li {

　　　　　 padding-left: 20px;

　　　　} 

 

　　二、相鄰同胞選擇器：

　　　　代碼示例：

　　　　h2+p {

　　　　　　font-size: 1.4em;

　　　　}

　　三、屬性選擇器：

　　　　代碼示例：

　　　　[id="header"] {

　　　　　　background: url(branding-color.png) repeat-y left top;

　　　　}

　　　　a[rel="nofollow"] {

　　　　　　padding-right: 20px;

　　　　}

5、樣式的優先級（權重）：

　　基本選擇器之間：ID選擇器〉類選擇器〉標籤選擇器

　　樣式表之間：　　行內樣式〉內嵌樣式〉外部樣式

　　css樣式之間： 　同一個選擇器且兩條相同的聲明，後一條聲明會覆蓋前一條聲明