1.复合选择器
复合选择器包括交集选择器、并集选择器、后代选择器和子选择器等；
1.1 交集选择器；
可以将一个标签设置成多个共同的属性值；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>交集选择器</title><style type="text/css"> /* 设置字体大小为20px; */ p{ font-size: 20px; } /* 设置字体颜色为红色 */ .c{ color:red; } /* 将两个属性合并在一起的选择器，且可以增加额外的属性，作用于运用了class选择器的字段 */ p.c{ text-decoration: underline; } </style></head><body><p id="p1">段落一</p><p id="p2">段落二</p><p id="p3" class="c">段落三</p><h1 id="h1" class="c">字体一</h1><h2 id="h2">字体二</h2><div id="d1">方块1</div></body></html>
复制代码
这里的段落三拥有 font-size:20px 的属性以及 color:red 的属性，现在要求段落三还需要添加额外的属性，这时可以用到交集选择器；
运行结果：
1.2 并集选择器；
可以简单的将多个标签增加同一种属性；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>并集选择器</title><style type="text/css"> /* 设置字体大小为20px; */ p{ font-size: 20px; } /* 设置字体颜色为红色 */ .c{ color:red; } /* 将两个属性合并在一起的选择器，且可以增加额外的属性，作用于运用了class选择器的字段 */ p.c{ text-decoration: underline; } /* 将所有的标签都加上背景色 */ p,h1,#d1{ background-color: gray; }</style></head><body><p id="p1" class="c">段落一</p><p id="p2">段落二</p><p id="p3">段落三</p><h1 id="h1">字体一</h1><h2 id="h2">字体二</h2><div id="d1">方块1</div></body></html>
复制代码
运行效果：
1.3 后代选择器；
如下，若将含有 p 标签的后代所有的 span 设置为红色，其他 span 标签不变，则用到后代选择器；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> span{ color:yellow; } /* 将含有p标签的span设置为红色，其他span标签不变 */ p span{ color:red; }</style></head><body><div>一层<p>二层<span>三层</span></p></div><span>二代</span><br/><div>三代</div><br/></body></html>
复制代码
运行结果：
1.4 子选择器；
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> /* 将含有div的第一代span设置为红色，后面的span不动 */ div>span{ color:red; }</style></head><body><div> <span>一层</span> <p><span>二层</span></p></div></body></html>
复制代码
运行结果：
2.继承特性
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> .c{ color:red; }</style></head><body><h1>Java技术</h1><ul> <!-- 将第一层设置为红色，后面的HTML,CSS,JS等都会设置为红色 --> <li class="c">网页基础 <ul> <li>HTML</li> <li>CSS</li> <li>JavaSript</li> </ul> </li> <li>动态网页</li> <li>J2SE框架</li></ul></body></html>
复制代码
运行效果：
3.层叠特性
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"> p{ color:blue; } .red{ color:red; } #d{ color:green; }</style></head><body> <!-- 标记选择器 --> <p>第一行文本</p> <!-- 类别选择器>标记选择器 --> <p class="red">第二行文本</p> <!-- ID选择器>类别选择器>标记选择器 --> <p class="red" id="d">第三行文本</p> <!-- 行内样式>ID选择器>类别选择器>标记选择器 --> <p style="color:yellow" class="red" id="d">第四行文本</p></body></html>
复制代码
运行结果：
由此可见：行内样式>ID 选择器>类别选择器>标记选择器
我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！
评论