CSS复合选择器
后代选择器
在CSS选择器中通过嵌套的方式,对特殊位置的HTML标签进行声明 外层的标签写在前面,内层的标签写在后面,之间用空格分隔 标签嵌套时,内层的标签成为外层标签的后代
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div h3{
color: #6495ED;
}
</style>
</head>
<body>
<div>
<h3>黑板报</h3>
<ul>
<li>
<h3>列表中的h3</h3>
中秋国庆双节放假通知</li>
<li>2020年团购全国包邮</li>
<li>2020秋季延迟发货开启</li>
<li>分享领佣金</li>
</ul>
<hr />
<h3>购物指南</h2>
<ul>
<li>支付宝担保交易,安全快捷</li>
<li>保证24小时之内发货</li>
<li>赠送积分,积分可用于支付</li>
<li>收货后7天内可以无理由退货</li>
<li>提供电子商务小包、EMS、快递</li>
<li>配送造成的所有损失由我们承担</li>
<li>提供免费短信提醒服务</li>
</ul>
</div>
<h3>div外面的 标题...</h3>
</body>
</html>
交集选择器
由两个选择器直接连接构成,选中二者各自元素范围的交集 第一个必须是标签选择器,第二个必须是类选择器或者ID选择器 选择器之间不能有空格,必须连续书写
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3.gwzn{
color: #008000;
}
</style>
</head>
<body>
<h3 class="gwzn">购物指南</h2>
<ul>
<li>支付宝担保交易,安全快捷</li>
<li>保证24小时之内发货</li>
<li>赠送积分,积分可用于支付</li>
<li>收货后7天内可以无理由退货</li>
<li>提供电子商务小包、EMS、快递</li>
<li>配送造成的所有损失由我们承担</li>
<li>提供免费短信提醒服务</li>
</ul>
<div class="gwzn">赠送积分赠送积分赠送积分赠送积分赠送积分赠送积分赠送积分</div>
</body>
</html>
并集选择器
多个选择器通过逗号连接而成 利用并集选择器同时声明风格相同样式
html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> h3,li{ color: #008000; } </style> </head> <body> <h3 >购物指南</h2> <ul> <li>支付宝担保交易,安全快捷</li> <li>保证24小时之内发货</li> <li>赠送积分,积分可用于支付</li> <li>收货后7天内可以无理由退货</li> <li>提供电子商务小包、EMS、快递</li> <li>配送造成的所有损失由我们承担</li> <li>提供免费短信提醒服务</li> </ul> </body></html>
