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

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

span{color:pink;}/*設置為粉色權值為1對膽小如鼠， ? ? ? ? ? ? ? ? ? 1對公開課*/

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

p.first{color:blue;}/*設置為藍色權值為0.1+0.1對膽小如鼠, ? ? ? ? ? ? ? ? ? ?*/

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

.first span{color:yellow;}/*設置為黃色權值為0.1+1對膽小如鼠 ? ? ? ? ? ? ? ? */

#second{color:green;}/*設置為綠色權值為 ? ? ? ? ? ? ? ? ? ? ? ? ? 100對公開課*/

#second span{color:yellow;}/*設置為黃色權值 ? ? ? ? ? ? ? ? ? 為100+1對公開課*/

p#second{color:blue;}/*設置為藍色權值 ? ? ? ? ? ? ? ? ? ? ? ? ?為0.1+100+1*/

p#second span{color:purple;}/*設置為紫色權值 ? ? ? ? ? ? ? ? ? ? 為0.1+100+1*/

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

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

不能隨便調換,順序是按照祖先先后順序的,打亂以后就找不到對應父級子級關系了.

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

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

測試一次

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