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

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

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

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

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

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

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

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

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

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*/

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

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

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

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

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

測試一次

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