使用::selection{}来重新设计背景颜色和文字颜色时,出现选择超出了我选择范围的情况,这是为什么呢?

来源:7-4 CSS3选择器 ::selection选择器

qq_小柯_1

2015-11-12 16:16

http://img.mukewang.com/56444a5f0001c97213320243.jpg

代码如下:

<!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>



写回答 关注

2回答

  • 慕斯3035540
    2016-08-11 08:56:04

     #con .head  #con .main  这是什么鬼。。。

    qq_小柯_...

    样式命名

    2016-12-29 12:09:03

    共 1 条回复 >

  • MR熊
    2015-12-23 16:29:15

    搞清楚什么叫块级元素,什么叫行级元素。

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242696 学习 · 2623 问题

查看课程

相似问题