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