CSS中有一個重要的概念:選擇器。選擇器使用一定的規則來指定一個或一組標記,從而對它們進行
統一的外觀控制。

1.標記選擇器。HTML使用標記語言,如html body table tr td div ul li等。標記選擇器就是選擇文檔中所有
指定的標記,然后對它們應用樣式,語法如下:

tagName    {}

如:li    {font-weight:bold}

2.類型選擇器。標記選擇器便于統一設置結點樣式,它的應用范圍太大,對頁面中所有這類標記都有效
然而很多時候沒有必要,類型選擇器縮小范圍。

tagName.className    {}

如:<dl class="expand">,要對這個<dl>標記應用樣式,可使用如下語法:
dl.expand    {}

如果上面的tagName省略:
.expand    {}
那么表示所有class為expand都采用此樣式。

3.id選擇器。其語法如下:

tagName#idName    {}
idName在頁面內是唯一的,所以tagName可以省略,加上tagName利于維護。

4.層次選擇器。它能沿著HTML文檔的樹狀層次結構向下指定,從而實現一組標記的統一樣式應用。
如:<div id="div1">
            <ul>
                    <li>some text</li>
                    <li>some text</li>
            </ul>
         </div>
         <div id="div1">
            <ul>
                    <li>some text</li>
                    <li>some text</li>
            </ul>
          </div>
如果此時給div1和div2中的li指定不同的顯示,如一個黑體一個斜體,那么可以給li加上不同的class屬性
然后采用類型選擇器對其定義,但這樣會使代碼變復雜,此時可用層次選擇器:
div#div1 ul li    {font-weight:bold;}

div#div2 ul li    {font-weight:italic;}

5.繼承。在CSS中有一些樣式是可以繼承的,如可以在<body>標記中指定字體大小統一為0.75em,如下:
    body    {font-size:0.75em;}

那么這時在文檔中所有字體的大小都會默認為0.75em,除非在子節點的CSS樣式重定義了大體大小。

6.樣式就近原則。


Javascript控制CSS
1.通過style對象改變結點的CSS。每個style對象對應為該元素指定的CSS,而每個CSS屬性一一對應于
style對象的屬性,它們只是書寫上有所區別:
    element.bgColor
    element.style.backgroundColor
前一種方式就是HTML標記屬性,后者則是利用CSS來控制。
2.利用className屬性來指定結點的樣式。
    如定義:
    .style1 {background-color:#ffffff;color:#000000}
    .style1 {background-color:#000000;color:#ffffff}

        <div class="style2">
            <ul>
                    <li>some text</li>
                    <li>some text</li>
            </ul>
         </div>

    
    如果document.getElementById('div1').className=style1,這樣就將改變了樣式。