1.關於按鈕-使用僞類選擇器 :after/:before
- 引入情景
在製作一個“更多”的按鈕時，由於運營所填充的按鈕是圖片形式，上面的“更多”兩字隨圖片的縮放而失去正常比例，在界面中看着極爲不協調以及虛化問題。於是將運營上傳的按鈕圖片重新上傳爲不帶文字只有背景圖的按鈕圖片，再在按鈕上添加文字。
- 語法
【:before】選擇器向選定的元素前插入內容。 使用content屬性來指定要插入的內容。
【:after】選擇器向選定的元素之後插入內容。使用content屬性來指定要插入的內容。
- 具體使用
<a class='content' href='#'></a>
a.content:after {
content: '更多';
}
然後將將該元素設置爲絕對定位absolute，再調整左右邊距/顏色等，實現之前的按鈕效果。這樣就可以解決圖片上文字隨圖片縮放而虛化的問題。
2.關於帶字標題背景圖的處理：text-indent
- 引入場景
運營填充的標題是一張帶字的背景圖。但是某一個需求是，需要獲取到這個標題的文字信息，但是此時標題是一整張圖，並且運營填充該圖時沒有寫入alt屬性的選項，也即無法通過圖的alt拿到標題文字。只能在上傳帶字背景圖後再填寫標題。此時標題與帶字標題背景圖同在，並且無法重合。
- 語法
text-indent 屬性規定文本塊中首行文本的縮進。
註釋：允許使用負值。如果使用負值，那麼首行會被縮進到左邊。
- 具體使用
在標題的類里加一句：
.title{
text-indent: -9999px;
}
既實現了視覺上“隱藏”真正的標題文字，又能使用jq獲取到標題文字信息。
3.僞類選擇器：nth-child()、nth-of-type()（可對比jq選擇器 :gt :lt）
- 引入場景
調整某個專題的時候，只需要對熱區中對某幾個熱區進行特別調整的時候，需要獲取到對應位置對元素。比如，需要獲取熱區（class='hotlist'）中第2、3、4個，和第7個進行不同對微調整。其中2 3 4爲同樣css調整，7爲另一種樣式調整。
- 語法
【:nth-child(n)】 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。n 可以是數字、關鍵詞或公式。
【注意】該選擇器選取父元素的第 N 個子元素，與類型無關。
示例：
.wrap p:nth-child(odd){} //匹配第奇數個wrap的子元素p
.wrap .child:nth-child(even){} //匹配第偶數個wrap的類名爲child的子元素
.wrap .child:nth-child(3n+1){} //匹配第1,4,7....的wrap的類名爲child的子元素
【:nth-of-type(n)】 選擇器匹配屬於父元素的【特定類型】的第 N 個子元素的每個元素。n 可以是數字、關鍵詞或公式。
示例：
.wrap .child:nth-child(3n+1) -匹配類名爲child的第1,4,7....個wrap的子元素 ，數的時候不會受其他類型的影響。
【注意】1. n 是計數器（從 0 開始），1 是偏移值
2.n寫在前面，不能寫成（1+3n）
- 具體使用
解決上面提到的引入背景。
<div class='wrap'>
<div class='hotlist'>第1個子元素</div>
<div class='hotlist'>第2個子元素</div>
<div class='hotlist'>第3個子元素</div>
<div class='hotlist'>第4個子元素</div>
<div class='another'>第5個子元素 其他類型</div>
<div class='another'>第6個子元素 其他類型</div>
<div class='hotlist'>第7個子元素</div>
<div class='hotlist'>第8個子元素</div>
<div class='hotlist'>第9個子元素</div>
<div class='hotlist'>第10個子元素</div>
</div>
（1）獲取wrap的名爲hotlist的第3個元素，如果第三個元素的類不是hotlist，就匹配不到這個元素。
.wrap .hotlist:nth-child(3){}
（2）獲取wrap的名爲hotlist的前4個子元素
.wrap .hotlist:nth-child(-n+4){}
（3）獲取wrap的名爲hotlist的從第7個開始後的子元素
.wrap .hotlist:nth-child(n+7){}
（4）獲取wrap的名爲hotlist的第2 3 4個元素
.wrap .hotlist:nth-child(-n+4):nth-child(n+2){}
（5）獲取wrap的名爲hotlist的第3 4 5 6 7個元素，此時只能匹配到第3 4 7三個元素，因爲其中5 6的類名是不是hotlist，匹配不到。
.wrap .hotlist:nth-child(-n+7):nth-child(n+3){}
（5）獲取wrap的名爲hotlist的第3 4 5 6 7個元素，此時匹配的是wrap中的第3 4 7 8 9個子元素，因爲他們類名是nth-of-type所指定的hotlist。
.wrap .hotlist:nth-of-type(-n+7):nth-child(n+3){}
4.移動端a標籤被點擊時背景色的取消
- 引入場景
當用戶點擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點擊的元素時，覆蓋顯示的高亮顏色。
即在ios移動端的鏈接，在點擊的時候，會有一個灰色的背景圖，想要把它取消。
- 語法
（1）-webkit-tap-highlight-color :該屬性可以只設置透明度。如果未設置透明度，iOS Safari使用默認的透明度。當透明度設爲0，則會禁用此屬性；當透明度設爲1，元素在點擊時不可見。
（2）-moz-user-select:none | text | all | element ：設置或檢索是否允許用戶選中文本。
none：文本不能被選擇
text：可以選擇文本
all：當所有內容作爲一個整體時可以被選擇。
如果雙擊或者在上下文上點擊子元素，那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素。
element：可以選擇文本，但選擇範圍受元素邊界的約束。
（3）-moz-user-focus ：通過將其值設置爲ignore，可以禁用對元素的聚焦，這意味着用戶將無法激活元素
- 具體使用
a {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}