文章插图
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... { }
文章插图
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>
文章插图
3.4、子代选择器：大于号>用大于号
>分割 ， 查找指定元素的子元素&第一代（儿子）元素中符合所有条件的元素 。不同于后代选择器，只在第一代中找 。父>后代1>后代2>...>后代n { }
.f1>p{background-color: antiquewhite;}.f1>.f2>p{text-indent: 2em;}
文章插图
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>
文章插图
3.6、普通兄弟选择器：波浪线~用波浪线
~分割 ， 查找指定元素同级的所有指定兄弟元素 ， 有相同的父元素 ， 符合条件的都会被找出来 。不同于相邻兄弟选择器 ， 不用相邻，多个结果 。兄弟1~兄弟2~...~兄弟n(所有同级兄弟n) { }
.fb2~p{text-indent: 1em;}.fb2~.fb3~p{text-indent: 2em;}
文章插图
?版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！推荐阅读
- 常用CSS样式属性
- 现代 CSS 指南 -- at-rule 规则扫盲
- 五虎将纹身图 五虎上将纹身含义大全
- CSS基础知识筑基
- 简笔画如何画漫画羊（简笔画羊的画法大全简单)
- CSS 动画一站式指南
- 270个四个字名字 二手旧货店铺起名大全
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
- 2022支付宝小鸡今日答题答案大全
