CSS使用::selection自定义网页反白颜色

7 月192014

作者：超级efly 发布：2014-07-19 15:16 分类：网络阅读：7,449

反白颜色，即是你选取一段文字时，所显示的文字颜色及背景颜色，一般浏览器都回采用蓝底黑字。现在我们也可以直接在CSS中使用 ::selection 参数来自定义我们网页反白的颜色，让我们的网页反白时更加活泼并清晰易懂！

效果预览（反白这段文字看看！）

注意：该效果不支持Internet Explore 8以下的版本！

【本段未被任何标签包围】 ::selection 可以让你的网页反白颜色与浏览器自带的有很大的区别，不过IE8以下的版本均不支持

【本段被  标签包围】我们可以使用 标签/容器名称::selection 来自定义不同标签下的 ::selection 效果

【本段被  标签包围】例如我们可以使用 i::selection 来修改在  标签下，反白的效果

【本段被 <div class="hello"> 标签包围】当然，我们也可以使用 .hello::selection 来修改在 class="hello" 容器下，反白的效果

不过要注意的是， ::selection 标签只能设定 color 和 background ，而不能设定任何其他参数，例如 font-size 等等

教学

1、想要达成上述的效果其实很简单，首先我们当然还是随便写好一个HTML网页，然后反白（选取）一下任意内容来看看浏览器自带的效果：

2、现在我们就可以加入 ::selection 到CSS中，自定义我们网页的反白颜色：

::selection{
	background: black;
	color: white;
}
i::selection {
	background: orange;
	color: white;
}
p::selection {
	background: yellow;
	color: black;
}
code::selection {
	background: blue;
	color: white;
}
.hello::selection {
	background: green;
	color: white;
}
h1::selection {
	background: purple;
	color: white;
}

::-moz-selection{
	background: black;
	color: white;
}
i::-moz-selection {
	background: orange;
	color: white;
}
p::-moz-selection {
	background: yellow;
	color: black;
}
code::-moz-selection {
	background: blue;
	color: white;
}
.hello::-moz-selection {
	background: green;
	color: white;
}
h1::-moz-selection {
	background: purple;
	color: white;
}

::selection{

background: black;

color: white;

}

i::selection {

background: orange;

color: white;

}

p::selection {

background: yellow;

color: black;

}

code::selection {

background: blue;

color: white;

}

.hello::selection {

background: green;

color: white;

}

h1::selection {

background: purple;

color: white;

}

::-moz-selection{

background: black;

color: white;

}

i::-moz-selection {

background: orange;

color: white;

}

p::-moz-selection {

background: yellow;

color: black;

}

code::-moz-selection {

background: blue;

color: white;

}

.hello::-moz-selection {

background: green;

color: white;

}

h1::-moz-selection {

background: purple;

color: white;

}

上述代码详解：从上述CSS我们可以看到， ::selection 即代表全网页所使用的效果，而 i::selection 或 p::selection 即是在  或  标签内的反白效果，当然， .hello::selection 就是 class="hello" 的容器内的反白效果

注释：由于Firefox（一意孤行）不支持该函数，我们还需要再多加一个Firefox自己的专属语法 ::-moz-selection 才行