CSS ::Selection

大家都知道瀏覽器對選中的文字預設樣式都是統一的，Windows下是一個深藍色的背景，白字的前景，而在Mac下是一個淡藍色背景，白色字型，就如上圖所展示的一樣，自從有了這個“::selection”選擇器後，我們在部分瀏覽器中可以設定你所需要的樣式，下面就讓我來告訴大家如何使用這個“::selection”來改變在瀏覽器中選中文字後的背景色與前景色。

::selection使用語法：

/*Webkit,Opera9.5+,Ie9+*/
   ::selection {
	background: 顏色值；
	color:顏色值；
   }
   /*Mozilla Firefox*/
   ::-moz-selection {
	background: 顏色值；
	color:顏色值；
    }
 

相容的瀏覽器：

::selection在IE家族中，只有IE9+版本支援，在Firefox中需要加上其字首“-moz”，查閱相關w3c官方資料，並沒有對這個屬性的解說資料，只知道這個屬性被規納在CSS的偽類選擇器中。

下面我們一起來看看其具體使用，例如如我們在Web頁面中有這麼一段話：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.

在預設情況下，在上面段落中選中任意文字，其背景都是深藍，前景是白色，下面我們給他加上一個“::selection”運用，把背景改成紅色，前景依舊是白色：

 p::selection {
    background: red;
    color: #fff;
  }
  p::-moz-selection {
    background: red;
    color: #fff;
  }

加上上面屬性後，你會後到，選中的文字其背景是紅色，而前景是白色，跟唐人的CSS帝國的效果是一模一樣的了，如下圖所示：

不知道你有沒有這樣的想法，我一開始冒出這樣的一個想法，就是我能不能通過“::selection”來改變選中的文字其他樣式呢？比如說，改變選中的字型，字號等等；於是我在上面的程式碼基礎上加了一個15px的字號：

 p::selection {
     background: red;
     color: #fff;
     font-size: 15px;
   }
		
   p::-moz-selection {
     background: red;
     color: #fff;
     font-size: 15px;
   }

大家猜結果如何？告訴大家吧，有點失望，結果是沒有任何效果，如下所示：

這樣一來也驗證了:“::selection”只能設定兩個屬性，一個就是background,另一個就是color屬性，設定其他屬性是沒有任何效果的。

一個小小的技巧分享，希望能對有需要的朋友有所幫助。