CSS 中關于上一個相鄰元素的選擇器,是指通過樣式選擇器選中與當前元素相鄰的上一個元素。這個選擇器是通過符號“+”表示的。
選擇器1 + 選擇器2 { /* 樣式代碼 */ }
選擇器1 + 選擇器2 表示的是,當選擇器1 和選擇器2 之間只有一個元素時,才會應用該樣式。
這個選擇器在實際開發中非常實用,舉個例子,假如我們要讓標題和標題下的段落之間有一個小間隔,可以使用下面這段代碼:
h2 + p { margin-top: 10px; }
這個代碼的意思是,在每個 h2 標題后面的第一個 p 段落前添加 10 像素的上外邊距。
需要注意的是,上一個相鄰元素選擇器只會匹配相鄰的元素,而不會匹配其他的元素。例如:
h2 + p { margin-top: 10px; } h2 ~ p { margin-top: 20px; }
上面這段代碼中,h2 + p 選擇器只會匹配 h2 后面的第一個 p 元素,并且給該元素添加 10 像素的上外邊距。而 h2 ~ p 選擇器會匹配 h2 后面的所有的 p 元素,包括第一個 p 元素,并且給這些元素添加 20 像素的上外邊距。
上一篇css 上下抖動 動畫
下一篇css 上一級元素