CSS初探

    CSS称为层叠样式表，就是说对于我们WEB页面中的任何标签都是一层一层叠加起来的，但我们最终只看到能露出来的样式内容。好比一个人穿了很多衣服，但我们并不能看到所有衣服的细节。
    其实仔细研究一下CSS标准发现对其的应用关键要抓住五个符号：#号、空格、逗号、点号以及没有符号。下面分别说一下：
    #号表示匹配ID：如#SSS{XXX：WWW}仅应用于ID为”SSS“的标签。
    空格表示一种路径：如TD A{XXX：WWW}就是说这个样式仅限于所有嵌套在TD里的A标签，A不一定是TD的子标签，只要在TD中就可以。
    逗号表示一种分组：如TD，A{XXX：WWW}就是说这个样式应用于TD和A这两种标签，A和TD没有任何关系。
     点号表示一种样式类型，如 .classname{XXX：WWW}就是说这个样式仅限于“class”值为“classname”的所有标签。
     没有符号表示一种特定标签的样式，如 TEXTAREA{XXX：WWW}就是说应用于所有的"textarea"的标签。
    这就是四个符号的意义，看起来非常简单，但由于它们能够几乎随意无限地组合，因此就具有了极大的灵活性。下面举两个变态的例子：
DIV.AAA   TABLE.BBB TR TD#YY   .CCC   .DDD P.AAA {XXX:WWW}
.EEE , .FFF DIV#TTT P.GGG , SPAN.HHH DIV A.SSS:HOVER{XXX:WWW}
第一个会应用到如下的标签中的红色部分：
<div class="AAA">
    <table class="BBB">
          <tr><td id="YY">
                <XXXX class="CCC">
                         <XXX class="DDD">
                               <p class="AAA“>
                                        saldkfjaslj
                               </p>
                         </XXX>
                </XXXX>
          </td></tr>
    </table>
</div>
对于第二个则会分别作用到下面的三段代码中的红色部分：
<XXX class="EEE">

<XXX class="FFF">
    <DIV id="TTT">
          <P class="GGG">
             lakfjsladkf
          </P>
    </DIV>
</XXX>

<SAPN class="HHH">
    <DIV>
          <A class="SSS">
                   lskdfjlskadj
           </A>
   </DIV>
</SPAN>

    由此看来CSS有很多的组合方式，它的承继级优先级机制能够搭配出各式各样的结果,只要设计的合理就很容易达到重用和异构。如此就能够把页面的样式完全分离出来，通过不同的CSS表现不同的皮肤。