爲所有相同的父元素中位於 p 元素之後的所有 ul 元素設置背景:
p~ul{
background:#ff0000;
}
<p>快樂生活</p>
<ul>
p~ul 選擇前面有
元素的每個
- 元素。
“~”的定義和用法
p~ul選擇器 p之後出現的所有ul。
兩種元素必須擁有相同的父元素,但是 ul不必直接緊隨 p。
css中“>”是css3特有的選擇器,A>B 表示選擇A元素的所有子B元素。
與A B的區別在於,A B選擇所有後代元素,而A>B只選擇一代。
.a,.b{逗號指相同的css樣式};
.a .b{空格指後代元素};
.a>.b{大於號指子代元素};
.a+.b{這個“+”是選擇相鄰兄弟,叫做“相鄰兄弟選擇器”
如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器(Adjacent sibling selector)。
例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:
h1 + p {margin-top:50px;}
這個選擇器讀作:“選擇緊接在 h1 元素後出現的段落,h1 和 p 元素擁有共同的父元素”。};