【关联选择器】
标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就
可以用此选择器。
【代码】
<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是一个
选择器,将二者结合成为一个组合选择器。