首页 > 其他分享 >css 伪元素

css 伪元素

时间:2023-07-26 09:36:42浏览次数:30  
标签:color text 元素 样式 文本 css first

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 目前处于试验阶段

标签:color,text,元素,样式,文本,css,first
From: https://www.cnblogs.com/riverone/p/17581552.html

相关文章

  • css案例-after伪类元素的例子
    下位三角例子<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</tit......
  • 02_CSS
    1.CSS1.简介1.是什么CascadingStylesheets,层叠样式表CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰。所谓层叠,可以将整个网页想象成一层一层的结构,层次高的将会覆盖层次低的,CSS可以分别为网页的各个层次设置样式。2.能做什么修饰美化html网页;外部样式表可以......
  • python字典遍历时删除元素
    Python字典遍历时删除元素在Python编程中,字典(dictionary)是一种非常有用的数据类型。它以键值对(key-valuepair)的形式存储数据,其中每个键(key)都是唯一的。字典可以用于存储大量数据,并且可以根据键快速查找对应的值。然而,在对字典进行遍历的过程中,我们需要注意一些问题,尤其是在删除元......
  • 数组元素和与数字和的绝对差
    给你一个正整数数组nums。元素和是nums中的所有元素相加求和。数字和是 nums中每一个元素的每一数位(重复数位需多次求和)相加求和。返回元素和与数字和的绝对差。注意:两个整数x和y的绝对差定义为|x-y|。示例1:输入:nums=[1,15,6,3]输出:9解释:nums的......
  • TailWind CSS工具库使用
    一、简介官方文档本CSS框架本质上是一个工具集,包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类,可以组合使用并直接在HTML代码上实现任何UI设计。二、安装介绍VUE项目的相关安装步骤1.安装TailWindCSS通过npm安装tailwindcss和它的相关依......
  • css制作三角
    使用border属性制作三角:当给一个宽高为0的盒子设置不同颜色的边框时会如下图所示,由此可见,想要设置三角,则可以将其余三条边框设置为透明色<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-widt......
  • 输出数组内每个元素的类型python
    输出数组内每个元素的类型PythonPython是一种简单而强大的编程语言,广泛用于数据处理和科学计算。在Python中,数组是一种重要的数据结构,它可以存储多个元素,并允许我们对这些元素进行操作。在本文中,我们将探讨如何输出数组内每个元素的类型,并提供相应的代码示例。什么是数组?在计算......
  • [爬虫]1.2.2 CSS选择器
    CSS(CascadingStyleSheets)是一种样式表语言,用于描述HTML元素的样式。CSS选择器是CSS规则的一部分,它决定了CSS规则应用于哪些元素。在网络爬虫的开发中,我们经常使用CSS选择器来定位和选取HTML元素。以下是一些常见的CSS选择器:1.元素选择器元素选择器选择所有给定的HTML元......
  • CSSYZ 思维训练 R4
    ProblemA题目大意给出一张只有0和1的矩阵,可以将$k$个点反转,求是否可以使这个矩阵中心对称,多测。算法分析这题是一个非常经典的贪心策略问题,我们发现,如果一个矩阵中心对称,那么$a_{i,j}$一定要和$a_{n-i+1,m-j+1}$所以,我们只要求出有几组应该对称的点并没有......
  • 翻转 实现数组元素倒序的方法
     在Java编程开发中,经常会遇到需要对数组进行操作的情况。其中一个常见的需求就是实现数组元素的倒序。本文将介绍一种简洁高效的方法来实现这个功能。在开始之前,我们需要先了解一下数组的基本概念。数组是一种容器,可以存储多个相同类型的数据。数组的元素可以通过索引来访问,索......