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


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

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

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

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

    ::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是蓝底白字,而你只是把蓝底改成了红底,那么,浏览器自带的白字设置会失效。

  • 相关阅读:
    Linux
    bzoj 1834
    bzoj 1002 找规律(基尔霍夫矩阵)
    bzoj 1005 组合数学 Purfer Sequence
    bzoj 1601 最小生成树
    bzoj 1001 平面图转对偶图 最短路求图最小割
    bzoj 1192 二进制
    bzoj 1012 基础线段树
    bzoj 1044 贪心二分+DP
    bzoj 1011 近似估计
  • 原文地址:https://www.cnblogs.com/foxcharon/p/7152892.html
Copyright © 2020-2023  润新知