在CSS中,同級元素是指在HTML文檔中處于相同層次結構的元素。
表示同級元素最常用的方式是使用CSS選擇器中的“后代選擇器”,即將兩個元素的選擇器連接起來形成一個新的選擇器。如下代碼:
.parent * { margin: 0; padding: 0; }
這個選擇器將所有.parent節點下的所有后代元素的margin和padding都設置成了0。注意,這里的“*”號表示任何元素,包括后代、子元素、以及后代的后代等等。
如果我們只想設置.parent節點下的直接子元素的樣式,可以使用“子選擇器”,即用“>”連接父元素和子元素的選擇器。例如:
.parent > .child { font-size: 18px }
這個選擇器將.parent節點下所有class為.child的直接子元素的字號設置成了18像素。
此外,我們還可以使用CSS的“同級選擇器”,即用“~”符號連接兩個同級元素的選擇器。它可以選擇在同一層級中,并且在同一個父元素下的所有元素。例如:
<div> <p>同級元素1</p> <p>同級元素2</p> <p>同級元素3</p> <p>同級元素4</p> <p>同級元素5</p> </div> p:first-child ~ p { background-color: yellow; }
上面的代碼將除第一個
元素外的所有同級元素的背景色設置成了黃色。
通過使用這些CSS選擇器,我們可以更加精確地對同級元素進行樣式的設置。