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

来源：互联网发布：python websocket 编辑：程序博客网时间：2024/06/03 18:43

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

【代码】

<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 0