1.后代选择器 html 结构 <div class='father'> <p>小哥哥 小姐姐</p> <div> <p>小帅锅</p> </div> </div> <p>小可爱</p>
使用后代选择器格式 .father p{ color:red; } 匹配的是"小哥哥 小姐姐" 和 "小帅锅",因为它匹配的是从儿子及以后的后代
2.子代选择器 /* 需求:只让小可爱变红(不改变html结构)*/ html结构 <div class='father'> <p>小可爱</p> <div> <p>小山猫</p> </div> </div> <p>大熊猫</p>
CSS 子代选择器写法 .father > p{ color:red; } 匹配的是'子代中最近 儿子',不包含儿子以外的关系
3.并集选择器 语法:选择器1, 选择器2, 选择器3 { css样式语句 } 注意:一个只能写一个选择器名字,多个选择器用逗号分隔
4.交集选择器 /*需求:只让熊大变红(不能改变html结构)*/ html 结构 <div class='red'>小熊熊</div> <p>熊二</p> <p class='red'>熊大</p>
交集选择器匹配写法 p.red { //先是满足匹配p标签,在满足.red类,同时满足则匹配 color:red; } 注意:中间不能有空格或者分隔符,标签选择器必须写在类选择器的前面