30-CSS-04-CSS(关联选择器&组合选择器)



【关联选择器】
标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就
可以用此选择器。


【代码】
<head>
	<style type="text/css">
		span b{									/*关联选择器——选择器中的选择器*/
			background-color:#09F;
			color:#FFF;
		}
	</style>
</head>


<body>
	<div>一个div的<b>区域</b></div>
	<span>一个span的<b>区域</b></span>
</body>




【效果】
<b>标签是加粗,代码中用关联选择器将<span>中的<b>标签样式改变,而<div>中的<b>标签样式不变仍是加粗。


【解释】
span b{}就是<span>中的<b>标签,如下代码:
span b a img{}
<span>中的<b>中的<a>中的<img>标签样式为……




============================================================================================================


【组合选择器】
对多个不同选择器进行相同样式设置的时候应用此选择器。
p,div { color:#FF0000;}
<p>p标签显示段落。</p>
<div>DIV标签显示段落</div>
注:多个不同选择器要用逗号分隔开。


【代码】


<head>
	<style type="text/css">
		.haha,div b{
			background-color:#000;
			color:#C00;
		}
	</style>
</head>


<body>
	<div>一个div的<b>区域</b></div>
	<span class="haha">一个span的<b>区域</b></span>
	<span>一个span的<b>区域2</b></span>
</body>




【效果】
“一个div的区域”中“一个div的”正常字体,“区域”黑底红字且加粗;
“一个span的区域”黑底红字且“区域”加粗,“一个span区域2”中的“一个span的”正常字体,“区域2”加粗。


【解释】
组合选择器.haha,div b{}表示凡是带有class="haha"和<div>中的<b>标签都改为该样式,前者.haha是一个选择器,后者div b是一个
选择器,将二者结合成为一个组合选择器。






  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值