您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

九个你不知道的 CSS 伪元素

时间:2023-05-23 11:47:01  来源:微信公众号  作者:web前端开发

css 伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的 JAVAScript 代码。 

虽然许多开发人员都熟悉常用的伪元素,如 ::before 和 ::after,但还有一些其他元素经常被忽视或未得到充分利用。 

在本文中,我们将分享9 个鲜为人知的 CSS 伪元素,它们可以增强您的样式设置能力。 

现在,让我们开始吧!

1. ::selection 伪元素

::selection 伪元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。 

例子:

::selection {
  background-color: yellow;
  color: red;
}

在上面的代码中,当用户在页面上选择文本时,它将以黄色背景和红色文本颜色突出显示。

2.::first-letter伪元素

::first-letter 伪元素允许您设置块级元素的第一个字母的样式。当您想将特殊格式应用于段落或标题的初始字符时,它会派上用场。 

例子:

p::first-letter {
  font-size: 2em;
  color: red;
}

在上面的代码片段中,每个段落的第一个字母将以更大的字体显示并显示为红色。

3. ::first-line 伪元素

类似于 ::first-letter,::first-line 伪元素以文本或块级元素的第一行为目标。您可以使用此伪元素将特定样式应用于段落或标题的起始行。 

例子:

p::first-line {
  font-weight: bold;
  text-decoration: underline;
}

在上面的代码中,每个段落的第一行将以粗体显示并带有下划线。

4. ::marker 伪元素

::marker 伪元素以列表项的标记为目标,例如无序列表中的项目符号点或有序列表中的数字。使用此伪元素,您可以自定义标记的外观。 

例子:

li::marker {
  color: blue;
  font-weight: bold;
}

5. ::placeholder 伪元素

::placeholder 伪元素允许您在输入字段和文本区域中设置占位符文本的样式。通过将自定义样式应用到占位符,您可以增强用户体验并使其与您的整体设计保持一致。 

例子:

input::placeholder {
  color: #999;
  font-style: italic;
}

在上面的代码中,输入字段中的占位符文本将以浅灰色和斜体字体样式显示。

6. ::cue 伪元素

::cue 伪元素以 <audio> 或 <video> 元素的提示文本为目标。提示文本通常用于多媒体内容中的字幕或副标题。使用此伪元素,您可以将样式专门应用于提示文本。 

例子:

video::cue {
  color: white;
  background-color: black;
}

在上面的代码中,视频元素中的提示文本将具有白色文本颜色和黑色背景。

7. ::grammar-error 和::spelling-error 伪元素

::grammar-error 和 ::spelling-error 伪元素允许您分别对标记为语法或拼写错误的文本部分设置样式。当内容中存在错误时,这些伪元素可用于向用户提供视觉提示。 

例子:

p::grammar-error {
  text-decoration: line-through;
  color: red;
}


p::spelling-error {
  text-decoration: underline;
  color: blue;
}

在上面的代码中,段落中的语法错误将以划线文本修饰和红色显示,而拼写错误将以下划线和蓝色显示。

8. ::backdrop 伪元素

::backdrop 伪元素与全屏 API 结合使用,以在全屏模式下自定义元素背后的背景。它允许您将默认的黑色背景更改为自定义颜色或样式。 

例子:

video::backdrop {
  background-color: gray;
}

在上面的代码中,当一个视频元素处于全屏模式时,它后面的背景将有一个灰色的背景色。

9. ::target-text 伪元素

::target-text CSS 伪元素代表滚动到的文本(如果浏览器支持文本片段)。它允许作者选择如何突出显示该部分文本。 

例子:

::target-text {
  background-color: rebeccapurple;
  color: white;
}

这是 MDN 提供的在线示例。请注意,此 API 目前处于试验阶段。

结论

CSS 伪元素为元素的特定部分设置样式和增强网页的视觉吸引力提供了广泛的可能性。您无需使用过多的 JavaScript 代码即可实现令人印象深刻的样式效果。



Tags:CSS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除。
▌相关推荐
CSS 伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的 JavaScript 代码。 虽然许多开发人员都熟悉常用的伪元素,如 ::before 和 ::after,但还有一些...【详细内容】
2023-05-23  Tags: CSS  点击:(0)  评论:(0)  加入收藏
免费的在线代码生成器将允许您快速迭代和构建您的代码。这里有十个最喜欢的用于创建 CSS 代码的工具,可在此页面上免费使用。1、Animista地址:https://animista.net/对于使用...【详细内容】
2023-05-18  Tags: CSS  点击:(9)  评论:(0)  加入收藏
这是一个纯CSS实现的Loading特效,包括无秩序音浪的动画效果。该特效可以被用于网站、应用程序等需要加载时的等待效果。 实现方法使用CSS3的@keyframes属性实现动画效果。通...【详细内容】
2023-05-17  Tags: CSS  点击:(20)  评论:(0)  加入收藏
CSS简介CSS(层叠样式表)是一种用于描述网页展示样式的语言。它可以与HTML结合使用,通过定义样式规则来控制网页的外观和布局。CSS的核心理念是分离样式和内容,使得开发者可以更...【详细内容】
2023-05-16  Tags: CSS  点击:(16)  评论:(0)  加入收藏
浮动是一种不同于固定和稳定定位的定位方式,它将元素排除在标准流之外,即元素将脱离标准流,不占据空间。在网页设计中,浮动元素可能会引起以下问题:1.父元素高度不够:如果元素被...【详细内容】
2023-05-15  Tags: CSS  点击:(17)  评论:(0)  加入收藏
本文由 Mads Stoumann 撰写的博文,主要介绍了如何通过简单的三行CSS代码实现网站的暗黑模式。该博文提到,<system-color>关键字一般反映用户、浏览器或操作系统做出的默认颜色...【详细内容】
2023-05-15  Tags: CSS  点击:(19)  评论:(0)  加入收藏
当你编写文档时,无论是为开源项目还是技术写作项目,你都应该有两个目标:文档应该写得好,同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML...【详细内容】
2023-04-17  Tags: CSS  点击:(35)  评论:(0)  加入收藏
CSS 现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方 数字时钟的变化 开始、暂停操作 重置操作如何仅...【详细内容】
2023-04-17  Tags: CSS  点击:(29)  评论:(0)  加入收藏
在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中,作者讨论了为什么不应该使用像素(px)作为网页字体大小的单位[1]。作者指出,相对于容器、浏览器或用户的字体大小...【详细内容】
2023-04-04  Tags: CSS  点击:(29)  评论:(0)  加入收藏
今天来用 CSS 实现一个带圆角的环形 loading 动画,效果是这样的先不考虑动画,其实就是这样一个图形那么,如何来绘制呢?下面花两分钟一起看看吧。一、CSS实现思路首先,看到这环形...【详细内容】
2023-04-04  Tags: CSS  点击:(36)  评论:(0)  加入收藏
▌简易百科推荐
CSS 伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的 JavaScript 代码。 虽然许多开发人员都熟悉常用的伪元素,如 ::before 和 ::after,但还有一些...【详细内容】
2023-05-23  web前端开发  微信公众号  Tags:CSS   点击:(0)  评论:(0)  加入收藏
免费的在线代码生成器将允许您快速迭代和构建您的代码。这里有十个最喜欢的用于创建 CSS 代码的工具,可在此页面上免费使用。1、Animista地址:https://animista.net/对于使用...【详细内容】
2023-05-18    今日头条  Tags:CSS   点击:(9)  评论:(0)  加入收藏
这是一个纯CSS实现的Loading特效,包括无秩序音浪的动画效果。该特效可以被用于网站、应用程序等需要加载时的等待效果。 实现方法使用CSS3的@keyframes属性实现动画效果。通...【详细内容】
2023-05-17  德育处主任pro  今日头条  Tags:CSS   点击:(20)  评论:(0)  加入收藏
CSS简介CSS(层叠样式表)是一种用于描述网页展示样式的语言。它可以与HTML结合使用,通过定义样式规则来控制网页的外观和布局。CSS的核心理念是分离样式和内容,使得开发者可以更...【详细内容】
2023-05-16  你的老师父  今日头条  Tags:Django   点击:(16)  评论:(0)  加入收藏
浮动是一种不同于固定和稳定定位的定位方式,它将元素排除在标准流之外,即元素将脱离标准流,不占据空间。在网页设计中,浮动元素可能会引起以下问题:1.父元素高度不够:如果元素被...【详细内容】
2023-05-15  NativeBase  今日头条  Tags:CSS   点击:(17)  评论:(0)  加入收藏
本文由 Mads Stoumann 撰写的博文,主要介绍了如何通过简单的三行CSS代码实现网站的暗黑模式。该博文提到,<system-color>关键字一般反映用户、浏览器或操作系统做出的默认颜色...【详细内容】
2023-05-15  大迁世界    Tags:CSS   点击:(19)  评论:(0)  加入收藏
当你编写文档时,无论是为开源项目还是技术写作项目,你都应该有两个目标:文档应该写得好,同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML...【详细内容】
2023-04-17    Linux中国  Tags:CSS   点击:(35)  评论:(0)  加入收藏
CSS 现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方 数字时钟的变化 开始、暂停操作 重置操作如何仅...【详细内容】
2023-04-17  前端侦探  微信公众号  Tags:CSS   点击:(29)  评论:(0)  加入收藏
在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中,作者讨论了为什么不应该使用像素(px)作为网页字体大小的单位[1]。作者指出,相对于容器、浏览器或用户的字体大小...【详细内容】
2023-04-04  大迁世界  微信公众号  Tags:CSS   点击:(29)  评论:(0)  加入收藏
今天来用 CSS 实现一个带圆角的环形 loading 动画,效果是这样的先不考虑动画,其实就是这样一个图形那么,如何来绘制呢?下面花两分钟一起看看吧。一、CSS实现思路首先,看到这环形...【详细内容】
2023-04-04  前端侦探  51CTO  Tags:CSS   点击:(36)  评论:(0)  加入收藏
站内最新
站内热门
站内头条