百度360必应搜狗淘宝本站头条
linux取消挂载yum卸载下横线怎么打mysql 外网访问权限php打乱数组顺序
当前位置：网站首页 > 编程文章 > 正文

关于 first-line、first-letter、selection 三个CSS伪元素的介绍

qiyuwang 2024-10-15 14:43 11 浏览 0 评论

除了::before 和::after，CSS 的伪元素还有::first-line、::first-letter 和::selection 这三个，这三个相对来说就简单得多，用法也较为纯粹。没看过前两篇文章的，笔者建议大家看看：

CSS 伪元素基础知识：before 与after （一）、CSS 伪元素基础知识：content 与counter 实用技巧（二）

::first-line

::first-line顾名思义就是「第一行」，通过这个伪元素可以轻松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：

<p> 前端达人公众号，已经有五年的历史啦，目前有几千名前端开发者订阅，公众号的宗旨是：分享当下最实用的前端技术。关注前端达人，与数千名达人们一起进步！期待你的订阅和关注！
</p>

CSS 只要这样写，页面呈现出来的第一行就会是绿色的，不论视窗如何缩放，只有第一行会是绿色的。

p::first-line{
 color:green;
}

::first-letter

::first-letter顾名思义就是「第一个字」，通过这个伪元素，可以做出许多文章第一个字放大或变色的效果，我们这里就用刚刚上面那段文字为例，把第一个字用下段的CSS 来做变化，就可以看到第一个字放大且变色了的效果。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
}

虽然把第一个字放大了，但排版上仍然有点乱没有美感，这时你可以加入line-height、float或padding等属性进行修正，经过修正后，你会惊喜的发现很像报纸杂志会出经常用的效果（第一个字会跨行显示）。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
 line-height:26px;
 float:left;
 padding:10px 5px 0 0;
}

不过很有趣的是，在实际应用的过程里，发现「有一些符号」是无法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符号，又会跟着一起放大...( 到底是怎样？ )

经过查询W3C的官网，发现了下面这段话，意思大概就是说网页里面有定义一些所谓「包覆式、点缀式的标点符号」，如果是这些包覆式的标点符号，基本上就无法放大，反而需要搭配其它字符进行使用，因此，在使用第一个字进行特殊变化时，就要注意有这种特殊状况会发生。

参考：https://www.w3.org/TR/CSS21/selector.html#first-letter

::selection

::selection 是个十分常见的伪元素，它就是负责一段选取文字的效果，以下面这段CSS来说，选取后的文字，就会是深色背景，黄色文字。

p::selection{
 color:yellow;
 background:#543;
}

延伸阅读——用JavaScript操控伪元素

虽然我们能用CSS操控伪元素，但因为伪元素不存在于网页元素内，所以无法通过JavaScript常规操控DOM的方式来修改或控制，不过JavaScript身为一个神通广大的编程语言，仍然是有方法可以办到的。

读取伪元素属性

一般来说使用JavaScript读取某个元素DOM里的属性不难，但相对来说要读取一个不存在网页里的元素就不容易，如果要读取伪元素属性，可以通过getComputedStyle来获得，getComputedStyle是个可以获取当前元素「所有的CSS属性值」，读取后会返回一个Object CSSStyleDeclaration，而这个属性是只读的，无法进行修改。

使用方法：window.getComputedStyle('元素', '伪元素')

举例来说html 放入一个div 以及一个span，待会会用这个span 来显示div 的::before 属性。

<div id="d">我是 div</div>
<span id="s"></span>

CSS 的部分指定伪元素的content和color。

#d::before{
 content:'伪元素的content ';
 color:red;
}

JavaScript使用window.getComputedStyle(d,'::before')获取div里头伪元素使用的style，然后显示在span里面。

var d = document.getElementById('d');
var s = document.getElementById('s');
var b = window.getComputedStyle(d,'::before');
s.innerHTML = b.content +'<br/>'+b.color;

最后页面呈现的结果，第一段就是原本的div加上红色的伪元素文字，下方第一段是content的内容，紧接着是伪元素的颜色属性。

修改伪元素属性

我们可以读取属性值也就一定要尝试修改，不过修改伪元素的属性其实比想像中的难，必须通过insertRule这个方法在指定的style里插入「预设的规则」，让这个规则去影响伪元素的属性表现。

用法：style 标签元素.insertRule(样式规则, 0)

举例来说我们的网页布局如下，一开始开头的部分有两组style，第一组是我们赋予元素的样式属性，第二组则是要来定义规则的style，因为要加入规则，所以让第二组style有一个id。至于html就放入一个div。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
 <style>
 #d::before{
 content:'伪元素的 content ';
 color:red;
 }
 </style>
 <style id="css"></style>
</head>
<body>
 <div id="d">我是div</div>
</body>
</html>

在完全没有编写JavaScript的状态，应该会呈现如下图的样子：

JavaScript开声明一个变量css，通过id获取style，然后使用在指定一个变量给css.sheet，就可以通过insertRule的方法修改了。需要注意的是，由于规则加入时会放在整串style的开头(第二个值预设0 )，所以纯粹使用一个#d是无法覆盖原本的属性( CSS权重问题)，所以这边使用#d#d两次，就可以在权重上压过原本的属性。(当然如果要用!important也是可以)

var css = document.getElementById('css');
var d = document.getElementById('d');
var c = css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);

如此一来，呈现出来的效果就是通过JavaScript修改的。

修改伪元素content

我们知道::before和::after的content可以通过attr获取父元素的属性，因此通过改变这个属性，就能间接连带改变content的内容，举例来说有个div，我们指定它的data-text="我是预设文字"，然后放两个按钮，期望点选不同的按钮，会更换content不同的内容。

<button id="b1">显示 ABC</button>
<button id="b2">显示 123</button>
<div data-text="我是预设文字">我是 div</div>

接着设定CSS，关键在使用content的attr，让伪元素直接显示父元素属性的内容。

button{
 font-size:16px;
}
div{
 margin:10px;
 font-size:20px;
}
div::before{
 content: attr(data-text) '，';
}

最后就是JavaScript的部分，通过setAttribute更改div的属性，就会看到content的内容修改了。

var b1 = document.getElementById('b1');
var b2 = document.getElementById('b2');
var d = document.querySelector('div');
b1.addEventListener('click',function(){
 d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
 d.setAttribute('data-text','123');
});

虽然说我们可以通过JavaScript 来操控伪元素，但伪元素终究不是真正的网页元素，也因此操作起来也不如基本操作网页元素DOM 来的简便，所以如果可以，还是尽量用正常的操控模式吧。

文章来源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html

https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html

原文作者：oxxostudio

由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，把上述两篇文章合成了一篇，并在此基础上进行了错误校正，如发现问题，欢迎你的指正

小结

关于伪元素的系列文章就介绍到这里，如果你喜欢此系列文章，麻烦各位点赞和转发，谢谢啦。关于伪元素的用法，虽然说大部分的时候用不太到，但某些时候也不失为强化网页效果、或是优化网页结构的好方法。

相关推荐

别再乱找了!这才是 Alist 本地安装挂载的正确打开方式

一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...

如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!

前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...

大数据传输的定义与大数据传输解决方案的选择

当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...

【工具】在线传输文件工具（在线文件互传）

前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...

如何使用 CAN-FD 在 LPC5500 上传输数据

目录1引言2CAN-FD3示例演示1引言...

轻松同步:将照片从三星手机传输到iPad的简便方法

概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...

常见又地道的网络缩写:美剧中常说的SFW到底是个啥?

在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...

每天学会一个计算机网络协议之FTP

开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...

即用即走，这3款文件分享工具真香

打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...

安卓手机里的文件和照片与Mac互传的办法

因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...

软网推荐:同一个平台选择不同的传输方法

平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...

跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）

大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...

全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)

前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...

文件传输工具有哪些?这3款堪称办公必备!

在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...

小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具

跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表