Skip to content

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>

Released under the MIT License.