零基础学习CSS(4)——::first-line、::first-letter、::before、::after、::selection

最新推荐文章于 2023-07-24 16:03:25 发布
最新推荐文章于 2023-07-24 16:03:25 发布
阅读量454 收藏
点赞数
分类专栏： 零基础学习Web开发 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43650934/article/details/108986056
版权

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

::first-line选择器：https://man.ilovefishc.com/pageCSS3/dotfirst-line.html
::first-letter选择器：https://man.ilovefishc.com/pageCSS3/dotfirst-letter.html
::before选择器：https://man.ilovefishc.com/pageCSS3/dotBefore.html
::after选择器：https://man.ilovefishc.com/pageCSS3/dotAfter.html
::selection选择器：https://man.ilovefishc.com/pageCSS3/dotdotselection.html

::first-line 选择器，修改文本的第一行内容，且不受浏览器尺寸限制：
仅对块级元素的第一行内容有效，行内元素不起作用。

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /*p::first-line：仅对 p 元素生效*/
        ::first-line{  /* 修改文本第一行内容 */
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/">点开，里面有好东西！</a>
</body>
</html>

image.png

image.png

::first-letter 选择器，修改文本的第一个字符：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        p::first-letter{
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/">点开，里面有好东西！</a>
</body>
</html>

::before 选择器，在被选中的文字前面加入内容：
::after 选择器，在被选中的文字后面加入内容：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 在p元素前后加入内容 */
        a::before{
            content: "加在开头";
        }
        a::after{
            content: "加在最后";
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>

image.png

::selection 选择器，用于修改用户选中文本的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 在p元素前后加入内容 */
        ::selection {
            background-color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam laboriosam recusandae totam est illo magni maiores! Officiis nostrum perferendis eligendi voluptatem alias, harum unde perspiciatis voluptatibus? Tenetur, expedita provident!</div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita amet dolorum architecto reiciendis molestiae quo minus doloribus totam. Earum qui iure nisi! Ducimus at consectetur pariatur reiciendis repellat, ipsam incidunt.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error facere laudantium esse natus, distinctio eaque. Dolores officia sapiente, provident cupiditate velit dolorem quas eum nihil nobis, impedit assumenda quae aut?</p>
    <a href="https://www.baidu.com/" target="_blank">点开，里面有好东西！</a>
</body>
</html>

image.png

Dragon水魅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css中伪类:after的用法(三种方式)
01-19
而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。 本文中其它伪元素暂且不表，单说:after伪元素。 after顾名思义是在元素后面的意思，实质是在元素之后添加内容。 这个伪元素...
CSS3伪元素::first-line、::first-letter、 ::Selection
波克比的前端CSDN博客
06-11 1049
p::first-line {font-weight:bold;}/*::first-line选择元素的第一行*/ p::first-letter {font-size: 56px; float:left; margin-right:10px;}/*::first-letter选择文本块的第一个字符,段落排版，首字下沉*/ p::selection{ background:red; color:#
CSS3 - 属性选择器使用详解
ShenWangNian的博客
04-09 4107
（1）选择指定 class 属性值为“class”的任意类型的任意多个元素。选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素，都将被选中。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。（1）如果父元素下的子元素类型都是一样的，那么上面的 *type 和 *child 选择器使用起来效果是一样的。其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。
:first-letter和:first-line
weixin_47124862的博客
11-30 1562
一、:first-letter选择器 在css中，我们可以使用该选择器，选中元素内容中的第一个字或者字母。 语法：元素:first-letter{} 举例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS :first-line选择器
lengqingIT的博客
03-20 293
HTML 用法 <body> <h1>:first-line选择器用来指定选择器第一行的样式。</h1> <p>实例 每个 p 元素的第一行选择的样式 www.semi-warm.com......................................................................
2023年的C基础笔记
qq_33552379的博客
07-24 1166
C的基础笔记
css3.0 伪类选择器
huimoumou的博客
07-07 677
伪元素选择器 伪元素选择器是针对css中已有的伪元素起作用。css提供的伪元素选择器有以下4个。 first-letter：该选择器对应的css样式对指定对象内第一个字符起作用。 first-line：该选择器对应的css样式对指定对象内第一行字符起作用。 before:该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。 after：该选择器与内容相关的属性结合使用，用于在指定...
CSS 伪元素和伪类
weixin_46048542的博客
08-23 252
CSS 伪元素用于设置元素指定部分的样式。 ::first-line伪元素用于向文本的首行添加特殊样式。 注意：::first-line 伪元素只能应用于块级元素。 以下属性适用于 ::first-line 伪元素： 字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear 请注意双冒号表示法 - ::first-line 对比 :first-line
CSS 选择器
weixin_34319111的博客
02-06 86
1. 选择器语法 https://github.com/leeluolee/nes/wiki/Selector 一个选择器是一个或多个被连结符分隔的简单选择器序列组成的链。一个伪元素可能会附加到选择器中的最后一个简单选择器序列。 一个简单选择器序列是没有被连结符分隔的简单选择器组成的链。它总是以一个类型选择器或通用选择器开始。除了类型选择器和通用选择器，没有其他类型的选择器允许在序列...
css简易的进度条
qq_45723045的博客
10-22 764
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
布局管理器（一）
guanhuaing
04-10 215
在第9章中，我们了解了Swing组件集合中的各种弹出窗口以及选择器类。在本章中，我们将会了解AWT与Swing布局管理器。 然而由于本书关注于Swing组件集合，我们不能仅是简单的使用。我们需要理解AWT与Swing布局管理器。事实上，比起五个Swing布局管理器中的三个，我们更经常使用的是五个AWT布局管理器中的四个。AWT布局管理器是FlowLayout，BorderLayout，GridLa...
CSS3 伪元素选择器，例如（E::before、E::after）
最新发布
03-25
E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容，主要是用它开显示修饰的内容，比如元素左侧价格...
clone-element:使用样式克隆HTML元素
05-24
克隆元素 ... 安装 npm i -save clone-element 用法 import cloneElement from '... ::first-letter ::first-line ::marker ::placeholder :hollow_red_circle: 仅适用于Firefox。 Chrome / Safari无法为::placehold
leetcode下载-blog:关注前端的技术记录博客
06-29
leetcode下载 关注前端的技术记录博客 总结、提升 欢迎提issue todo（网络和网络安全系列）： ...JS能够获取伪元素吗（”:after”、”:before”、”:first-line”、”:first-letter”、”:selection
web开发-css完整笔记
05-17
基本选择器——before&after,first_line,first_letter,selection,基本选择器 结构伪类选择器——empty,first_child,nth_child&nth_last_child,nth_type&&last_type,root 其他伪类选择器——lang,not,页内锚点 伪类...
Web前端—CSS（二）
zx123456789kk的博客
01-02 339
1、美化网页元素 1.1、为什么要美化网页 1、有效的传递页面信息 2、美化网页，页面漂亮，才能吸引用户 3、凸显页面的主题 4、提高用户的体验 span标签：重点要突出的字，使用 span 套起来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
CSS3 选择器的用法总结
@黄小泽的个人博客
11-09 1578
本篇博客主要针对CSS3一个很常用的知识点进行归纳总结，那就是选择器。目的：通过选择器的使用，开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器： 通配符 直接子节点 常用伪类选择 位置选择 属性选择 状态选择 过滤选择 通配符 通配符包括三种： （1）通配符^，表示开头匹配。 （2）通配符$，表示结尾匹配。 （3）通配符*，表示包含匹配。 它的用法如下： &...
html5选择器基本操作
kaiwen的博客
06-06 1363
一、结构性伪类选择器 1、类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式。比如： p.left{text-align: left} p.rigth{text-align: right} 2、伪类选择器 类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。 最常见的伪类选择器 a:link{ color: #ff6600 } 未被访问的链接 a:visited{ color: #87b291 } 已被访问的链接 a:hover{
css3基础整理
weixin_45966674的博客
11-24 498
选择器 原来的css中存在的选择器有 Id选择器 给标签实在id属性，就可以在css中用 # 找到他 标签选择器 例如有一个body标签 就可以在css中用body去寻找他 类选择器，给元素添加class属性然后在 css中使用 . 找到他 后代选择器，比如寻找body下的div 可以用 body div 中间用空格隔开 通配符选择器 * 作用于页面的所有元素 css3新的选择器有 子元素选择器 比如找 body下的div 就可以用 body>div 比后代选择器跟严谨，只有被body直接包含的d
:first-child 和:first-of-type
07-28
:first-child和:first-of-type是CSS选择器中的两个不同的选择器。 :first-child选择器匹配其父元素中的第一个子元素。例如，如果我们有以下CSS代码： p:first-child { background-color: yellow; } span:first-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值