CSS中的選擇器可以幫助我們在HTML文檔中選中指定的元素,并對其進行樣式控制。其中,橫向選擇器可以幫助我們選中某個元素在同一級別下的兄弟元素。
語法格式: element ~ siblings 其中, element:指定元素名 siblings:指定元素的兄弟姐妹元素 ~: 一個波浪線,表示選中的是元素的兄弟元素,而不是子元素
假設我們有如下HTML代碼:
<div> <p>第一個段落</p> <p>第二個段落</p> <ul> <li>列表項1</li> <li>列表項2</li> </ul> </div>
我們可以使用以下CSS代碼選中第二個段落元素的兄弟元素即列表項1和列表項2:
p ~ li { color: red; }
上述代碼表示:選中所有第二個段落元素之后的兄弟元素,并將其文字顏色設置為紅色。
需要注意的是,橫向選擇器只能選中元素在同一級別下的兄弟元素,無法通過橫向選擇器選中父元素或子元素。