1. 首頁 > 生活百科 > >

CSS選擇器大全48式( 四 )

生活百科


CSS選擇器大全48式

文章插圖
03、組合關系選擇器（6）3.1、合并/并集選擇器：逗號多種基礎選擇器的合并組合，相當于大家共用一個樣式設置，選擇器名字用逗號,隔開 。
選擇器1, 選擇器2, 選擇器3, ... { }例如：div, #su1, .user{...}
<style type="text/css">pre, /* 標簽名選擇器 */#a1, /* id選擇器 */.f1/* 類名class選擇器 */{color: skyblue;font-weight: bold;}</style>3.2、交集選擇器：緊密相連多個選擇器拼接，中間無任何連接符（利用選擇器本身的前綴分割），不能有空格，選擇 都同時滿足的元素 。
選擇器1選擇器2選擇器3... { }

CSS選擇器大全48式

文章插圖
a.nav.left[href]{background-color: #0000ff;}.form-float a.nav{/*兩個交集 ， 組合成一個后代選擇器*/color: white;}3.3、后代選擇器：空格用空格分割 ， 選擇指定元素的** 符合選擇器條件 **的 所有后代 元素，注意這里的“后代”，即所有子元素都是篩選目標，不限等級，可跨級 。支持多個層級，從第一個選擇器（祖父）的開始，一直往下遞歸，所有符合條件的后代，最后一個選擇器為目標元素 。
祖父 后代1 后代2 ... 后代n(遞歸后代n) { }
<style>.f1 p{color: red;}.f1 .f2 p{font-weight: bold;}</style><div class="f1"><p class="f2">子代</p><div class="f11"><p>孫代</p><div class="f111"><p>曾孫</p></div></div><div class="f2"><p>孫代2</p></div></div>
CSS選擇器大全48式

文章插圖
3.4、子代選擇器：大于號>用大于號>分割 ， 查找指定元素的子元素&第一代（兒子）元素中符合所有條件的元素 。不同于后代選擇器，只在第一代中找 。
父>后代1>后代2>...>后代n { }
.f1>p{background-color: antiquewhite;}.f1>.f2>p{text-indent: 2em;}
CSS選擇器大全48式

文章插圖
3.5、相鄰兄弟選擇器：加號+用加號+分割，查找指定元素相鄰&同級的后一個指定元素，二者有相同的父元素且相鄰，中間不可間隔 。只向后找一個，要求有點多 。
胸弟1+兄弟2+...+兄弟n(第一個兄弟n) { }
.fb2+.fb3{font-weight: bold;}.fb2+p+p{color: red;}<div class="fb1"><p class="fb2">子代</p><p class="fb3">兄弟1</p><p class="fb4">兄弟3</p><div class="fb11"><p>孫代</p><div class="fb111"><p>曾孫</p></div></div><p class="fb2">兄弟3</p></div>
CSS選擇器大全48式

文章插圖
3.6、普通兄弟選擇器：波浪線~用波浪線~分割 ， 查找指定元素同級的所有指定兄弟元素 ， 有相同的父元素 ， 符合條件的都會被找出來 。不同于相鄰兄弟選擇器 ， 不用相鄰，多個結果 。
兄弟1~兄弟2~...~兄弟n(所有同級兄弟n) { }
.fb2~p{text-indent: 1em;}.fb2~.fb3~p{text-indent: 2em;}
CSS選擇器大全48式

文章插圖
?版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請注明出處！

推薦閱讀