CSS選擇器-進階

Pseudo-elements

用來指定一個元素特定的部份，例如：元素的第一個字元、第一行，指定在元素內容之前或之後插入內容。

語法：

選擇器::pseudo-element {
欄位/屬性:值/value;
}

::first-line

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

::first-letter

p::first-letter {
color: #ff0000;
font-size:200%;
}

::before，標籤前插入

h1::before {
content: url(smiley.gif);
}

在h1標籤前插入smiley.gif圖片

::after，標籤後插入

::selection，使用者選取的部份

::selection {
color: red;
background: yellow;
}

Pseudo-classes

用來定義一個元素的特定狀態，例如，指定使用者滑鼠滑過一個元素、一個元素訪問過/或未訪問過、一個目前處於focus狀態的元素。

語法：

選擇器:pseudo-class {
property:value;
}

例：

/* 未走訪過的連結 */
a:link {
  color: #FF0000;
}

/* 走訪過的連結 */
a:visited {
  color: #00FF00;
}

/* 滑鼠滑過時 */
a:hover {
  color: #FF00FF;
}

/* 選中的連結 */
a:active {
  color: #0000FF;
}

其他參考資料：CSS Pseudo-classes

Curriculum