p{color:red;}/*顯示為紅色權(quán)值為0.1對(duì)膽小如鼠， ? ? ? ? ? ? ? ? ? 0.1對(duì)公開(kāi)課*/

.first{color:green;}/*顯示為綠色權(quán)值為0.1對(duì)膽小如鼠 ? ? ? ? ? ? ? ? ? ? ? ? */

span{color:pink;}/*設(shè)置為粉色權(quán)值為1對(duì)膽小如鼠， ? ? ? ? ? ? ? ? ? 1對(duì)公開(kāi)課*/

p span{color:black;}/*設(shè)置為黑色權(quán)值為0.1+1對(duì)膽小如鼠, ? ? ? ? 0.1+1對(duì)公開(kāi)課*/

p.first{color:blue;}/*設(shè)置為藍(lán)色權(quán)值為0.1+0.1對(duì)膽小如鼠, ? ? ? ? ? ? ? ? ? ?*/

p.first span{color:purple;}/*設(shè)置為紫色權(quán)值為0.1+0.1+1對(duì)膽小如鼠 ? ? ? ? ? ?*/

.first span{color:yellow;}/*設(shè)置為黃色權(quán)值為0.1+1對(duì)膽小如鼠 ? ? ? ? ? ? ? ? */

#second{color:green;}/*設(shè)置為綠色權(quán)值為 ? ? ? ? ? ? ? ? ? ? ? ? ? 100對(duì)公開(kāi)課*/

#second span{color:yellow;}/*設(shè)置為黃色權(quán)值 ? ? ? ? ? ? ? ? ? 為100+1對(duì)公開(kāi)課*/

p#second{color:blue;}/*設(shè)置為藍(lán)色權(quán)值 ? ? ? ? ? ? ? ? ? ? ? ? ?為0.1+100+1*/

p#second span{color:purple;}/*設(shè)置為紫色權(quán)值 ? ? ? ? ? ? ? ? ? ? 為0.1+100+1*/

都是層級(jí)選擇器，后面元素是前面元素的后代。

p .first span{color:blue;} 表示的就是p標(biāo)簽所有后代中 帶有first類(lèi)的標(biāo)簽 ?的所有后代中的span標(biāo)簽

不能隨便調(diào)換,順序是按照祖先先后順序的,打亂以后就找不到對(duì)應(yīng)父級(jí)子級(jí)關(guān)系了.

#footer .note p{color:yellow;} 意思是先找到id為footer的元素,再找到其后代中所有class帶有note的元素,最后找到其后代的所有p標(biāo)簽.

note和p中間有空格,表示祖先與子孫級(jí)別,就是說(shuō)p標(biāo)簽必須要是.note的子孫級(jí)才行
<div id="footer">
<div class="note">
<p>這樣就正確了</p>
</div>
</div>

測(cè)試一次

后面的都是前面的子元素，這個(gè)設(shè)置的是父元素下子元素的效果，這個(gè)只能用三級(jí)和二級(jí)元素來(lái)區(qū)分了