twweeb's Blog

「::selection」是CSS3才有的一個特效，為了讓使用者閱讀上更舒適，因此網頁設計者，會修改網頁反白文字後的顏色，來方便瀏覽者閱讀。你平常在網路上看文章時事後也會像這樣，把正在閱讀的地方，用滑鼠反白呢?應該看厭了那個單調的藍色了吧，試試這個方法，舒適閱讀。

如何修改反白文字的顏色

::selection的使用，是在CSS3之後才有，所以在IE家族中，IE9+才支援，在Firefox中需要加上其前缀“-moz”，還有是他的屬性，不能做大幅度修改，因為這個美化功能，純粹只針對顏色來做修改，因此如 : 字體大小、字體…等，即使下了font屬性，也不會生效。

第1步 使用方法如下，能用的屬性大概就是background、color和text-shadow，不知道還有沒有其他的。

::selection {
	background: 背景顏色值;
	color: 文字顏色值;
}
::-moz-selection {
	background: 背景顏色值;
	color: 文字顏色值;
}

第2步 如果想額外針對斜體、內容來做不一樣的美化，可以把指定的性質，加在「::selection」前面，例如「p::selection」、「i::selection」。

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

i::selection {
	background: #FF18A6;
	color: #fff;
}
i::-moz-selection {
	background: #FF18A6;
	color: #fff;
}

• 參考資料 : http://www.w3cplus.com/content/css-selection