一、語法

CSS 規(guī)則由兩個部分構(gòu)成：選擇器和聲明。
選擇器：需要改變樣式的 HTML 元素
聲明：由一個屬性和一個值組成

注意：

1. 一條CSS規(guī)則有一個聲明或者多個聲明組成的聲明組；
2. 聲明組用{}（大括號）括起來；
3. 聲明用；（分號）結(jié)束,聲明組中最后一條聲明的分號可以省略；（不過我一般沒有省略，這個看個人喜好）
4. 屬性和值之間用：（冒號）隔開；

例子：

.maomao{
    width:100px;
    height:100px;

}

二、注釋

CSS注釋以 /* 開始, 以 */ 結(jié)束。

例子：

.maomao{
    width:100px;
    height:100px;
    /*background：#000;*/
}

三、選擇器

（一）通配符選擇器（＊）

通配符選擇器是用來選擇所有元素

*{
    marigin: 0;
    padding: 0;
}
/*我相信大家在reset樣式文件中經(jīng)常見過*/
/*所有元素的margin和padding都設(shè)置為0*/

（二）元素選擇器

元素選擇器，是css選擇器中最常見而且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等。

例子：

<style type="text/css">
    li{
        marigin: 0;
        padding: 0;
    }
</style>
<ul>
    <li>元素選擇器</li>
    <li>元素選擇器</li>
    <li>元素選擇器</li>
</ul>
/*頁面上所有l(wèi)i元素的margin和padding都設(shè)置為0*/

（三）id 選擇器

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 # 來定義

例子：

<style type="text/css">
    #maomao{
        width: 100px;
        height: 100px;
        background: #f00;
    }
    /*id為maomao的HTML元素定義寬高為100像素，背景色為紅色的樣式*/
</style>
<div id="maomao">id 選擇器</div>

（四）class 選擇器（類選擇器）

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。

HTML元素以class屬性來設(shè)置class選擇器,CSS 中 class 選擇器以 . 來定義。

例子：

<style type="text/css">
    .maomao{
        width: 100px;
        height: 100px;
        background: #f00;
    }
    /*所有class為maomao的HTML元素定義寬高為100像素，背景色為紅色的樣式*/
</style>
<div class="maomao">class 選擇器（類選擇器）</div>
<div class="maomao">class 選擇器（類選擇器）</div>
<div class="maomao">class 選擇器（類選擇器）</div>

（五）后代選擇器

后代選擇器（descendant selector）又稱為包含選擇器,可以選擇作為某元素后代的元素；

前面的稱為祖先元素，后面的稱為后代元素，中間用空格隔開

祖先元素和后代元素之間的層次間隔可以是無限的。

例子：

<style type="text/css">
    div p{
        marigin: 0;
        padding: 0;
    }
    /*頁面上所有div元素中所有p元素的margin和padding都設(shè)置為0；該例子中所有p元素的margin和padding都為0*/
</style>
<div>
    <p>后代選擇器</p>
    <ul>
        <li>
            <p>后代選擇器</p>
        </li>
    </ul>
</div>

（六）子元素選擇器

后代選擇器,只能選擇作為某元素子元素的元素；

前面的稱為父元素，后面的稱為子元素，中間用>（大于號）隔開

例子：

<style type="text/css">
    div>p{
        marigin: 0;
        padding: 0;
    }
    /*頁面上所有div元素的所有子元素p的margin和padding都設(shè)置為0；該例子中只有第一個p元素的margin和padding都為0，第二個p元素的margin和padding都不為0*/
</style>
<div>
    <p>子元素選擇器</p>
    <ul>
        <li>
            <p>子元素選擇器</p>
        </li>
    </ul>
</div>

（七）相鄰兄弟元素選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。

例子：

<style type="text/css">
    li + li{
        marigin: 0;
        padding: 0;
    }
    /*該例子中會把列表中的第二個li和第三個li變?yōu)榇煮w。第一個li不受影響*/
</style>
<ul>
    <li>相鄰兄弟元素選擇器</li>
    <li>相鄰兄弟元素選擇器</li>
    <li>相鄰兄弟元素選擇器</li>
</ul>

（八）選擇器分組

選擇器分組是將具有相同樣式的元素分組在一起，每個選擇器之間使用，（逗號）。

例子：

<style type="text/css">
    li,h1,p{
        marigin: 0;
        padding: 0;
    }
    /*該例子中會把所有l(wèi)i元素、h1元素、p元素的margin和padding都設(shè)置為0。*/
    /*這個選擇器我相信大家在reset樣式文件中也經(jīng)常見過*/
</style>
<ul>
    <li>選擇器分組</li>
    <li>選擇器分組</li>
    <li>選擇器分組</li>
</ul>
<div>
    <h1>選擇器分組</h1>
    <p>選擇器分組</p>
</div>

注意：

1. id和class的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。

2. id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。具體原因XHTML:網(wǎng)站重構(gòu)

喜歡的小伙伴們就打賞下（嘿嘿）

上期回顧：CSS回顧復(fù)習(xí)三（CSS書寫規(guī)范、順序和命名規(guī)則——CSS書寫規(guī)范）

下期內(nèi)容：CSS新手學(xué)習(xí)二（CSS創(chuàng)建和CSS執(zhí)行順序）