CSS組合的標簽是用于將多個選擇器組合在一起,以指定更具體的樣式規則的方法。CSS組合的標簽有四種:后代選擇器、子選擇器、相鄰兄弟選擇器和通用兄弟選擇器。
/* 后代選擇器 */ .parent .child { color: red; } /* 子選擇器 */ .parent >.child { font-size: 16px; } /* 相鄰兄弟選擇器 */ .sibling1 + .sibling2 { background-color: green; } /* 通用兄弟選擇器 */ .sibling1 ~ .sibling2 { border: 1px solid blue; }
后代選擇器使用空格來連接父元素和子元素,例如在上面的代碼中,只有class為.child的元素是class為.parent的元素的后代元素。子選擇器使用“>”符號來連接父元素和子元素,例如在上面的代碼中,只有作為class為.parent的直接子元素的class為.child的元素才會被設置字體大小為16px。
相鄰兄弟選擇器使用“+”符號來指定選擇器后的緊鄰元素,例如在上面的代碼中,只有緊接class為.sibling1的元素后緊鄰的class為.sibling2的元素才會設置背景顏色為綠色。通用兄弟選擇器使用“~”符號來指定選擇器后的所有兄弟元素,例如在上面的代碼中,只要class為.sibling1的元素后面有一個class為.sibling2的兄弟元素,就會將邊框設置為1像素寬的藍色邊框。