網(wǎng)頁前端開發(fā) - CSS ::Selection

選擇文本，背景是紅色，而文本是白色的問題，這個問題圖趣從網(wǎng)上搜過好多，但大都答非所問，有的直接回答copy到word里，改...，博客園上圖趣終于找到了問題答案，如下圖所示：

或許大家對這樣的實(shí)現(xiàn)并不陌生，可是有很多童鞋可能跟我一樣，并不知道是如何實(shí)現(xiàn)，因?yàn)樵谀J(rèn)情況下，選擇網(wǎng)站文本都是深藍(lán)的背景，白色的字體,就如下本站的而言，選擇文本后，背景是深藍(lán)色，而選中的文本就是白色，如下圖所示：

后來帶著這樣的問題，我也是到處尋找解決的方法，幾經(jīng)高人指點(diǎn)，說是CSS的“::selection”實(shí)現(xiàn)的，這樣一來在google中大量搜索有關(guān)于“::selection”的使用方法，功夫不負(fù)有心人，總算是搞清楚了。后來覺得這個蠻有意思的，特意整理出來與大家一起分享。

就如前面所言，大家都知道瀏覽器對選中的文本默認(rèn)樣式都是統(tǒng)一的，Windows下是一個深藍(lán)色的背景，白字的前景，而在Mac下是一個淡藍(lán)色背景，白色字體，就如上圖所展示的一樣，自從有了這個“::selection”選擇器后，我們在部分瀏覽器中可以設(shè)置你所需要的樣式，下面就讓我來告訴大家如何使用這個“::selection”來改變在瀏覽器中選中文本后的背景色與前景色。

::selection使用語法：

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

兼容的瀏覽器：

::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前綴“-moz”，查閱相關(guān)w3c官方資料，并沒有對這個屬性的解說資料，只知道這個屬性被規(guī)納在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.

在默認(rèn)情況下，在上面段落中選中任意文本，其背景都是深藍(lán)，前景是白色，下面我們給他加上一個“::selection”運(yùn)用，把背景改成紅色，前景依舊是白色：

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

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

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

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

大家猜結(jié)果如何？告訴大家吧，有點(diǎn)失望，結(jié)果是沒有任何效果，如下所示：

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

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