網頁設計之CSS實戰(6) --- 僞類與僞元素

一、僞類

僞類用於向某些選擇器添加特殊的效果。
僞類的語法：

selector : pseudo-class {property: value}

CSS 類也可與僞類搭配使用。

selector.class : pseudo-class {property: value}

1、錨僞類

僞類名稱對大小寫不敏感

a:link {color: #FF0000}		/* 未訪問的鏈接 */
a:visited {color: #00FF00}	/* 已訪問的鏈接 */
a:hover {color: #FF00FF}	/* 鼠標移動到鏈接上 */
a:active {color: #0000FF}	/* 選定的鏈接 */

2、first-child 僞類

first-child 僞類來選擇元素的第一個子元素。

<!--這裏是第一個p元素設爲黑體，不是p元素的第一個子元素設爲黑體，易誤解-->
p:first-child {font-weight: bold;}

3、lang 僞類

爲不同的語言定義特殊的規則。

二、僞元素

僞元素用於向某些選擇器設置特殊效果。
僞元素的語法：

selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

1、first-line僞元素

“first-line” 僞元素用於向文本的首行設置特殊樣式。

2、first-letter 僞元素

用於向文本的首字母設置特殊樣式

3、before 僞元素

在元素的內容前面插入新內容。

h1:before
  {
  content:"hello";
  color:red;
  }

4、after 僞元素

在元素的內容之後插入新內容。