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;

}