css又被稱為網頁的美容/化妝師，今天來介紹一下怎麼給html添加樣式
閱讀這篇文章前需要對標籤選擇器，類選擇器和ＩＤ選擇器有基本概念，並且閱讀過上一篇文（css優先級）
如果已經有概念或是曾經使用過，那麼就達到學習門檻囉
這是一個html標籤的結構圖
當我們想要給hello,world添加顏色的時候，我們可以選擇這樣做
沒錯，這就是所謂的行內樣式，這樣做的缺點就是如果有很多
個div，就要寫很多次行內樣式，如果要修改的話會找很久，
而優點就是立即見效，因為他的優先級很高，也不用考慮結構
問題，如果配上ＵＩ庫來使用的話，能夠很快的產出東西，對
維護性不要求的場合非常方便，這也是一般初學者最先接觸的
設置樣式的方法
如果遇到很多個div， 他們有共通的樣式，就可以考慮標籤選
擇器，只要把標籤名寫上去就大功告成，他的效果為全部的
div都套用紅色字體
再來是比較進階一點的情境，div一層包一層的時候，上圖可
以發現一層包了一層又包一層，在html裡面，標籤是有關係
的，包來包去的關係，就叫父子級，我們把最外層的div命名
為outer（外），而裡面（中），就叫做outer的子級，而更裡面
（內）就叫做outer的孫子級，今天我們只想給子元素（中）添
加顏色，不想動到孫子級（內）的時候，這時就可以選用 >
這個符號，叫做子級選擇器， 他的效果就是輩份比自己小一
階的元素能夠得到效果，而小兩階或三階等孫輩份元素都套用
不到
那麼，如果我想讓所有我的後代都能得到效果呢，這時可以這
樣寫，只要加個空格就ＯＫ，意思就是輩份比outer小的div都
能得到效果
如果我想讓某個元素有顏色，但我又不想用行內樣式，我能怎麼做呢？
可以選擇類選擇器或ＩＤ選擇器，而類選擇器的優點是效能高
速度快，可複用性強，ＩＤ選則器的優點是優先級高，立即見
效，缺點是這個元素在網頁上的身份必須獨一無二（比方說Ｌ
ＯＧＯ圖，或主標題），如果我只是想添加藍色，而且我確定
我會使用很多次藍色，那麼就不是獨一無二的元素，所以這裡
用類選擇器比較適合
類選擇器和ＩＤ選擇器我都知道了，還有沒有其他方法？
有，li:nth-child(２)
意思就是li元素裡的所有子元素的第二個，套用效果
當使用這種方法的時候，可能會遇到一些問題，比方說新增
或刪除標籤結構的時候，這時原本的第二個元素可能就變成
第三個元素或第一個元素，要怎麼辦呢？
這時就可以使用nth-of-type，就不是ul內的所有子元素的第二
個，而是ul內class相同或tag相同的元素的第二個，這樣一
來，就算新增元素，只要他不是相同的類型，就不會影響計
數
而數字可以寫成n，2n，3n-1等等的方式，製作有規律樣式的表格很方便，比方說條紋顏色
接下來介紹的這個我都稱呼為兄弟選擇器，或比鄰選擇器，他
就是可以選到鄰居，範例的意思就是.first後面（只有後面，前
面沒用）緊跟著的span元素能得到效果（對，只能對一個元素
有效），需要注意的地方是他們是兄弟關係，不是父子關係
＊，這個東西叫做通配符，或是通用選擇器，意思就是，全部，我全都要.jpg
不管你是tag還是class還是id啥的，只要你在文檔裡面，就連
html和body標籤都無法倖免，通通都設為藍色文字顏色，但
相對的，這個選擇器的優先級很低
＊除了拿來初始化tag的margin和border和padding以外就沒有用了？
are you sure?
其實可以這麼用，就是某個部分裡面的全部我都一次設定，也是相當實用的寫法
有時候，我需要選擇一大包東西，但有些不是我想要的，怎麼辦呢？
這時候就輪到not選擇器出場了，not的括號裡面可以寫各種
條件，讓你過濾掉不想要的元素
最後再來介紹一下中括號三兄弟，他的缺點是效能差，但優點
是對付表單元素很好用，有時候也會有class取的沒有那麼統一
的時候，總體來說還是非常有機會能派上用場的
*=的意思就是 "包含" class*='funny'就是class裡面有包含funny的元素都能套用到效果
而 ^= 的意思就是，開頭為，也就是funny開頭的都套用效果
而 $= 的意思是，結尾為，也就是結尾為last的元素都套用效果
