使用::selection{}来重新设计背景颜色和文字颜色时，出现选择超出了我选择范围的情况，这是为什么呢？
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
p::selection{
background: orange;
color: green;
}
#con{
width: 600px;
height: 700px;
border: 1px solid green;
margin: 20px auto;
border-radius: 5%;
box-shadow: -5px 3px 6px green;
}
#con .head{
width: 500px;
height: 60px;
border: 1px solid green;
margin-top: 10px;
border-radius: 5%;
margin: 0 auto;
box-shadow: -5px 3px 6px green;
text-align: center;
line-height: 60px;
font-size: 18px;
font-weight: bold;
font-family: 微软雅黑;
color:green;
}
#con .main{
padding: 20px;
}
.main p{text-indent:2em; }
</style>
</head>
<body>
<div id="con">
<div>将被选中的文字显示的背景颜色和文字给成特别的颜色</div>
<div>
<p>
狐狸说：“对我来说，你只是一个小男孩，就像其他成千上万个小男孩一样没有什么两样。我不需要你。你也不需要我。对你来说，我也只是一只狐狸，和其他成千上万的狐狸没有什么不同。但是，如果你驯养了我，我们就会彼此需要。对我来说，你就是我的世界里独一无二的了；我对你来说，也是你的世界里的唯一了。”
</p>
</div>
</div>
</body>
</html>
