【入门篇】CSS复合选择器、CSS继承特性与CSS层叠特性

CSS的复合选择器大致有3种,在CSS选择器中,可以两个或两个以上选择器通过不同方式组合使用。
(一):“交集”选择器;
“交集”选择器是由两个选择器直接构成,其结果是选中二者各自元素范围的交集。要求:第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。其间不能有空格。
例如:”div.aaa{color:red; display:inline;}”、”div#aaa{color:red; display:inline;}”

(二):“并集”选择器;
是由多个选择器通过逗号连接而成,在声明的时候,如果选择器的风格是完全相同的,或者部分相同,这是就可以使用并集选择器,可以节省代码量,也方便修改。
例如:”h1,h2,h3,h4,p{font-size:12px;}”

(三):后代选择器;
CSS可以通过嵌套的方式对特殊位置的HTML标记进行声明。
例如:
#aaa{font-size:12px;}
#aaa span{color:red;}
……
<div id=”aaa”>文字<span>文字</span></div>
……

CSS的继承特性
简单的说,就是将各个HTML标记看做一个容器,其中被包含的小容器会继承大容器的风格样式。
例如:
body{font-size:12px;}
#aaa{font-size:14px;}
……
<div>文字
<div id=”aaa”>文字</div>
</div>
……
例中body样式定义了网页的基本字体大小为12px,如果在body里面的所有标记未作出重新定义,将采用其父标记的样式,即12px。

CSS层叠特性
简单的说,层叠特性是为了解决CSS的冲突而设计的,也就是前面提到的选择器的优先级:

行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式
(行内样式就是:”<div style=”color:red;”>文字</div>”)
在设计CSS的时候特别注意CSS的优先级,正确的选用选择器。