CSS入門系列（三）關聯選擇器&組合選擇器

CSS入門系列（三）關聯選擇器&組合選擇器

目錄

1. 關聯選擇器

定義是：選擇器中的選擇器。假設如下：

<div>這個<b>一個</b>div</div>
<span>這個<b>一個</b>span</span>

我們在head中定義b標籤的樣式：

b{
樣式略；
}

定義完之後在div和span標籤中，b的標籤都會按照樣式變化，如何我只想讓span標籤中的b標籤改變樣式，怎麼辦呢？

span b{
樣式略；
}

就是span中的b中的樣式。

2. 組合選擇器

對多種選擇器進行相同樣式的定義
假設對haha類和div標籤中的b標籤進行相同的樣式設定，那麼：

.class,div b{
樣式略；
}

3. 僞元素選擇器

這個例子大家都應該知道，就是假設有個一個超鏈接，我點之前有下劃線，並且是藍色，而點之後呢就是變成紅色，證明我訪問過。

<a href="http://www.sina.com.cn" target="_blank">僞元素選擇器演示</a>

現在我們自定義這種狀態，怎麼設置呢？這就需要僞元素了。
關於超連接有三種效果：

/*未訪問*/
a:link{
/*設置背景；設置下劃線；設置字體；*/
background-color:#06F;
text-decoration:none;
font-size:18px;
}

/*鼠標懸停*/
a:hover{
background-color:#FFF;
text-decoration:none;
font-size:24px;
}

/*點擊效果*/
a:active{
樣式略
}

/*訪問後效果*/
a:visited{
格式略
}