選擇器 屬性選擇器（通過標簽屬性來選擇） E[attr]： 表示只要元素<E>存在屬性attr就能被選中 如： div[class] E[attr=val]： 表示元素<E>存在屬性attr的值等於val，即可被選中 如： div[class="val"] E[attr*=val]： 表示元素<E> ...
選擇器
屬性選擇器（通過標簽屬性來選擇）
- E[attr]： 表示只要元素<E>存在屬性attr就能被選中 如： div[class]
- E[attr=val]： 表示元素<E>存在屬性attr的值等於val，即可被選中 如： div[class="val"]
- E[attr*=val]： 表示元素<E>存在屬性attr的值包含val，且在任意位置 如： div[class*="text_val"]
- E[attr^=val]： 表示元素<E>存在屬性attr的值包含val，且在開始位置 如： div[class^="val_one"]
- E[attr$=val]： 表示元素<E>存在屬性attr的值包含val，且在結束位置 如： div[class$="two_val"]
偽類選擇器
- E:first-child： 選擇所有元素的第一個子元素<E>（該偽類很容易讓人誤解，且是在CSS2中定義）
- p:first-child 表示選擇器匹配任何元素的第一個子元素<p>
- p>i:first-child 表示選擇器匹配所有<p>元素的第一個子元素<i>
- p:first-child i 表示選擇器匹配任何元素的第一個子元素<p>中的所有<i>元素
- E:last-child： 選擇元素的最後一個子元素（與E:first-child相似）
- E:nth-child(n)： 選擇所有元素的子元素<E>，且<E>元素是符合n制定的規則的
- E:nth-child(3)： 選中第3個子元素<E>
- E:nth-child(n)： 選中全部的子元素<E>，因為n遵循線性變化，從0，1，2，3，4…… 當n<=0時，選取無效
- E:nth-child(2n-1)： 選中所有的奇數的<E>
- E:nth-child(-n+5)： 選中前5個<E> 註意： E:nth-child(5-n) 這樣寫是沒有作用的
- E:nth-last-child(-n+5)： 選中後5個<E>
- E:nth-child(even)： 選中所有的偶數的子元素<E> 補充： E:nth-child(odd) 所有的奇數
- E:empty： 選中沒有任何內容的<E>元素，包括空格
- E:target： 結合錨點進行使用，出於當前錨點的元素會被選中
- 其他不常用偽類選擇器如： :nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type，:only-child，:only-of-type等
偽元素選擇器
- E::before，E::after： <E>元素內部的開始和結束創建一個元素，該元素是行內元素，且需結合content屬性使用
特別說明： 這兩個選擇器在舊版本當中是偽類選擇器（不存在偽元素的概念），新版本下E:before，E:after會被自動識別為E::befote，E::after
- E::first-letter： 文本的第一個字母或文字
- E::first-line： 文本第一行
- E::selection： 選中文本的樣式
顏色
- rgba(0,0,0,0.1)： 色彩空間，一種新的顏色的表示方式，其中R（red），G（green），B（blue），A（alpha，不透明度）
- hsla(200,%10,%10,1)： H（hue，色調， 取值範圍0~360，其中0/360表示紅色，120表示綠色，240表示藍色），S（saturation，飽和度，取值範圍0%~100%），L（lightness，亮度，取值範圍0%~100%），A（alpha，不透明度，取值範圍0~1）
補充： opacity（不透明度）只能針對整個盒子設置，子盒子及其內容會繼承父盒子的不透明度，而rgba，hsla可應用於任何設置顏色的地方，且不具有繼承性
文本陰影
- text-shadow： 可分別設置偏移量，模糊度，顏色（可設透明度）
- 水平偏移量：正值向右，負值向左
- 垂直偏移量：正值向下，負值向上
- 模糊度不能為負值
舉例說明：
文字凸起： .tu{ text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; }
.ao{
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
盒模型
- box-sizing： css中通過box-sizing來指定盒子模型；box-sizing有兩個值；分別是：
- content-box： 盒子的實際寬度等於width值加上border值加上padding值，是預設值
- border-box： 盒子的實際寬度等於設置的width值，即使定義了border和padding，也不會改變盒子的實際寬度
