首页 > Web开发 > 详细

CSS3伪元素 ::first-letter ::first-line ::selection

时间:2017-07-12 00:02:54      阅读:247      评论:0      收藏:0      [点我收藏+]

首先,关于伪元素的语法:

有的时候单冒号也能用,但最好写双冒号。

伪类:匹配的是元素(不同状态或结构的)。

伪元素:匹配的是元素中的一部分内容(首字符,首行文本)。

::first-letter

匹配 某元素的 首字符。

例:

 

<!DOCTYPE html>
<html>
<head>
    <title>test010_伪元素选择器_::first-letter</title>
    <style type="text/css">
        p::first-letter{
            color:red;
        }
    </style>
</head>
<body>
    <p>hello world</p>            
</body>
</html>

 

结果:

技术分享

::first-line

匹配 某元素的 首行文本。

 

::selection

匹配 被用户选取的 部分。

例:

 

<!DOCTYPE html>
<html>
<head>
    <title>test012_伪元素选择器_::selection</title>
    <style type="text/css">
        p::first-line{
            color:red;
        }
        p::selection{
            background-color: orange;
            color:#e1e1e1;
        }
    </style>
</head>
    <script type="text/javascript">
        
    </script>
<body>
    <p>hello world
        <br>
        world is mine
    </p>            
</body>
</html>

 

结果:

技术分享

技术分享

注意:当你修改 ::selection 样式后,浏览器自带的 ::selection会失效。

比如,浏览器默认的::selection是蓝底白字,而你只是把蓝底改成了红底,那么,浏览器自带的白字设置会失效。

CSS3伪元素 ::first-letter ::first-line ::selection

原文:http://www.cnblogs.com/foxcharon/p/7152892.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!