在 CSS 中,使用組合選擇器可以根據不同的條件來選擇元素,以達到更精確的樣式呈現效果。
組合選擇器由兩個或多個簡單選擇器組合而成,其中最常見的組合選擇器有以下幾種:
E F:后代選擇器,選擇 E 內所有的 F 元素。 E >F:子選擇器,選擇 E 直接子元素內的 F 元素。 E + F:相鄰選擇器,選擇緊跟在 E 之后的 F 元素。 E ~ F:通用兄弟選擇器,選擇和 E 具有相同父元素的所有 F 元素。
例如,我們可以使用后代選擇器選擇 div 元素內所有的 p 元素并設置顏色為紅色:
div p { color: red; }
我們也可以使用子選擇器,選擇 div 直接子元素內的 p 元素并設置字體大小為 14px:
div >p { font-size: 14px; }
另外,如果需要針對連續的兩個元素設置不同的樣式,可以使用相鄰選擇器,例如下面的代碼將選擇所有相鄰的 em 和 strong 元素:
em + strong { font-weight: bold; }
最后,使用通用兄弟選擇器可以選擇和某個元素具有相同父元素的所有元素,在下面的代碼中,我們選擇所有和 p2 具有相同父元素的 p 元素并設置字體顏色為藍色:
p2 ~ p { color: blue; }
通過組合選擇器,我們可以輕松地根據元素的層次關系、父子關系、相鄰關系或者通用兄弟關系來精確地設置元素的樣式。
上一篇css的繼承和級別關系
下一篇css的類選擇器定義