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

最新推荐文章于 2024-07-30 22:36:34 发布

weixin_30483013

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量114

点赞数

文章标签： javascript ViewUI

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

版权

首先，关于伪元素的语法：

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

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

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

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

转载于:https://www.cnblogs.com/foxcharon/p/7152892.html

weixin_30483013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3伪元素 ::first-letter ::first-line ::selection

首先，关于伪元素的语法：有的时候单冒号也能用，但最好写双冒号。伪类：匹配的是元素(不同状态或结构的)。伪元素：匹配的是元素中的一部分内容(首字符，首行文本)。::first-letter匹配某元素的首字符。例：<!DOCTYPE html><html><head> <title>test01...
复制链接

扫一扫