如何使用CSS3 ::selection 选择器

1、应用代码。从代码可以看出来，它们变成了红色。::selection{ color:#ff0000; }::-moz-selection{ color:#ff0000; }

2、CSS font-size 属性，改变P 元素的大小。第二段的 P元素变大3倍。<style>p {font-size:300%}::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style>

3、CSS margin-bottom 属性，为P 元素设置一个下边距。<style>p { margin-bottom:2cm; }::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style>

4、CSS3 transition 属性，我尺攵跋赈们把 div 元素变成一个可以变换大小的图形 框，当鼠标在上面的时候，图形就变长。文字也会随之扩展或者换行。<style>div{wi颊俄岿髭dth:100px;height:100px;background:blue;transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */}div:hover{width:300px;}::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style>

5、CSS3 resize 属性，我们调整了 div元素的大小。<style>div{border:2px solid;padding:10px 40px稆糨孝汶;width:300px;resize:both;overflow:auto;}::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style>

6、CSS font-weight 属性,我们把p 元素变成粗体。<style type="text/css">p.thicker {font-weight: 900}::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style>