CSS中有雙標記的概念,即一個選擇器對應的樣式規則包含兩個及以上的標記。這種寫法能夠提高樣式的復用性和靈活性,下面我們來介紹幾種常見的雙標記。
/* 類型選擇器+類選擇器 */ p.highlight { background-color: yellow; }
這種寫法可以使頁面中特定的段落(p標記)獲得特殊的樣式(highlight類)。特別的是,這個highlight類也可以應用到其他的HTML元素中,比如h1標題,以實現樣式的復用。
/* 類型選擇器+ID選擇器 */ div#header { height: 100px; }
這種寫法可以為特定的元素(div標記)指定唯一的樣式(header ID)。同時,header這個ID也可以被其他元素使用,但是這是不推薦的,因為ID應該是唯一的。
/* 類型選擇器+屬性選擇器 */ a[target="_blank"] { color: red; }
這種寫法可以為特定的元素(a標記)根據其屬性(target="_blank")指定樣式(紅色顏色)。可以通過更改元素的屬性值,讓其符合這個樣式規則。
/* 類型選擇器+偽類選擇器 */ a:hover { text-decoration: underline; }
這種寫法可以為特定的元素(a標記)定義鼠標懸停時的樣式(下劃線)。這個樣式規則不需要額外的標記,只需要偽類選擇器即可實現。
/* 類型選擇器+偽元素選擇器 */ p:first-letter { font-size: 200%; }
這種寫法可以為特定的元素(p標記)的第一個字母(first-letter)指定樣式(200%的字體大小)。同樣的,偽元素選擇器也可以應用于其他的元素,比如:first-line可以為某個元素的第一行應用樣式。