前端笔记——伪元素选择器

最新推荐文章于 2022-04-16 11:47:54 发布
最新推荐文章于 2022-04-16 11:47:54 发布
阅读量102 收藏
点赞数
分类专栏： 李立超 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44158539/article/details/107822873
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-letter{
            font-size:100px;
        }
        /*
          伪元素：表示一些特殊的并不真实存在的元素（特殊的位置）
             伪元素使用  ：：开头
             ：：first-letter  表示第一个字母
             ：：first-line   表示第一行
             ::selection  表示选中的内容
             ：： before 元素开始的位置
             ：：  after 元素结束的位置
               -befor和after必须结合content属性使用

        */
        p::fitst-line{
            background-color:red;
        }
        div::before{
                content:'abc'
        }
    </style>
</head>
<body>
    <div>耐心，静心</div>
    <p>
        <span>xuexi</span>
        <span>xuexi</span>
        <span>xuexi</span>
        <span>xuexi</span>
        静心
    </p>
    
</body>
</html>
恬一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端裁图-如何使用ps软件将矩形图片裁剪成圆角矩形
weixin_44158539的博客
08-22 6424
1.ps打开一个图片 2.用矩形工具画出一个矩形覆盖在要裁剪的图形上 3.将圆角矩形转化为矩形选区，方式：ctrl+鼠标左键（鼠标左键选中的是矩形图层，一般图层在ps界面的右侧栏） 矩形变为选区后是一个虚线框 4.将右侧两个图层同时选中，矩形选框图层的位置在被裁剪图层下（注意图层的位置顺序 笔记中的第六步即为接下来要操作的第五步，手误，懒得修改 6.crtl+shift+i 反选，反选之后选择的是被裁除的边角，按delete删除多余的选区，图层裁剪完成 最后保存图片，图片裁剪完成 ...
前端笔记-——空格、」、「符号的使用
weixin_44158539的博客
07-08 2885
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <!-- 在网页中编写多个空格，默认为一个空格 在1html中有时候不能直接写一些特殊符号，比如多个连续空格， 比如字母两侧的大于号和小于号 实体的语法： &实体的名字； .
笔记｜使用CSS选择器（使用伪元素选择器）
GUIDM的博客
04-16 1885
1、伪元素选择器 伪元素选择器（pseudo- selector）：提供更复杂的功能，但并非直接对应html文档定义的元素。 伪元素 伪类 ⚠️伪元素实际上并不存在 1.1、使用::first-line 伪元素选择器 匹配文本块的首行。 eg： <style type="text/css">​ ​::first-line {​​ background-color:grey;​​ color:white; ​​} ​​</style>​​ 伪元素选...
CSS学习笔记（一）：伪元素选择器
Ui_none的博客
04-06 387
伪元素选择器 一般情况下，在html中通过基础选择器和复合选择器（如id、class等）就能定位到大多数的元素从而进行样式的修改。但是，部分情况下，可能存在使用其他手段就能更为简单的定位到需要修改的元素。这些补充手段中，伪类选择器和伪元素选择器就是比较知名的一种。但是由于伪类选择器和伪元素选择器定位性过于广泛，因此语法规则也相当多。 首先来讲伪元素选择器。在html文本中，通过在在这里插入代码片 ...
CSS选择器之伪类选择器（伪元素）
weixin_33824363的博客
04-28 156
selection [CSS4]应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（IE8及以下不支持）（火狐-moz-selection） first-line 选择每个 <p> 元素的首行，并为其设置样式。 first-letter 选择每个 <p> 元素的首字母，并为...
伪类选择器
Hemx的博客
02-03 133
伪类选择器 有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。 a:link link伪类表示为普通链接（没访问过的链接）设置样式 a:link{ color:yellowgreen; } a:visited visited表示为访问过的链接设置样式 由于涉及到用户的隐私，所以使用visited伪类...
CSS入门十：伪元素选择器
小枯林的博客
12-20 899
目录 伪元素选择器： 实例：未使用任何伪元素效果时： 2.::before：在前面添加内容 3.::after：在后面添加内容 4.::first-line：选择制定选择器的首行 5.::first-letter：选择文本的第一个字符 1.::selection：选择制定元素中，被用户选中的内容。这个以后使用的频率可能略高。 前置介绍： CSS入门八（状态性选择）和CSS入门九（结构性选择）两篇博客主要介绍了伪类选择器； 无论是状态性选择还是结构性选择，都是以选择独立的个体为主...
黑马前端css笔记.zip
08-14
例如，类选择器（.class）可以更精确地定位元素，ID选择器 (#id) 用于唯一标识元素，而伪类（如:hover, :active, :focus）则用于在不同状态下改变元素样式。新增的兄弟选择器 (~) 和相邻兄弟选择器 (+) 可以控制元素...
css经典学习笔记.zip
11-01
CSS选择器种类繁多，包括类型选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。层叠原则（Cascading）决定了当多个规则应用于同一元素时，哪个规则优先级更高。一般情况下，更具体的选择器优先级更高，ID...
精通CSS笔记——是学习精通CSS的一些感悟
08-29
它利用伪类选择器（如`:hover`）和背景图像的不同部分来实现当鼠标悬停在链接上时，显示不同的背景图像部分，从而达到类似滑动门打开的效果。这种方法在早期的网页设计中非常流行，但现在我们可以用更现代的方法，如...
笔记
02-23
【笔记】——前端学习整理 前端开发是构建互联网应用程序的重要组成部分，它负责用户与网站或应用的交互。在这个笔记中，我们将深入探讨前端开发的基本概念、核心技术以及实践应用。 一、HTML（超文本标记语言） ...
笔记本电脑展示柜：使用HTML5和CSS3为笔记本电脑创建展示柜页面
02-11
1. **选择器**：使用更精确的选择器，如类选择器、伪类选择器（`:hover`、`:active`、`:focus`）和属性选择器，来为特定元素设置样式。 2. **Flexbox布局**：通过`display: flex`和相关的属性（如`justify-content`...
前端笔记——相对定位
weixin_44158539的博客
08-05 1096
定位(position) -定位是一种更加高级的布局手段 -通过定位可以将元素摆放到页面的任意位置 -使用position属性来设置定位 可选值： static(默认值，元素是静止的，没有开启定位) relative:开启元素的相对定位 absolute:开启元素的绝对定位 fixed:开启元素的固定定位 sticky：开启元素的粘滞定位 1.相对定位(relative)： -当元素的position属性值设置为ralative时则开启了元素的相对定位 -相对定位是参照元素在文档流中的位置进行定位的 -相对
一天一个webpack报错小总结———更新到webpack初阶学完为止
weixin_44158539的博客
12-13 910
webcpack.config.js文件中的相关代码注释 /* webpack.config.js webpack的配置文件 作用：指示webpack干哪些活儿(当你运行webpack时，会加载里面的配置) *重点：所有的构建工具都是基于nodejs平台运行的~模块化默认采用commonjs */ //resolve：用来拼接绝对路径的方法 const {resolve} = require('path'); module.exports={ //webpack配置
前端笔记——固定定位
weixin_44158539的博客
08-05 647
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
前端——表格样式2
weixin_44158539的博客
10-16 511
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{
前端笔记——绝对定位
weixin_44158539的博客
08-05 457
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{
CSS——表单的常用属性
weixin_44158539的博客
10-17 442
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form acti
js基础-函数
weixin_44158539的博客
09-03 380
函数
java程序伪代码_Java学习笔记——伪代码及程序控制
最新发布
05-30
伪代码通常是一种近似于自然语言的编程语言，用于描述程序的算法或逻辑。Java中的伪代码通常包括以下几个部分： 1. 变量声明：定义程序中使用的变量和数据类型。 2. 输入输出：描述输入和输出的方式和格式。 3. 控制结构：描述程序的流程和控制结构，包括if语句、for循环、while循环等。 4. 函数和方法：描述程序中使用的函数和方法，包括函数的参数和返回值。 下面是一个简单的Java程序的伪代码示例： ``` // 变量声明 int x; double y; // 输入输出 System.out.println("请输入 x 和 y 的值："); x = Scanner.nextInt(); y = Scanner.nextDouble(); System.out.println("输入的 x 和 y 的值分别为：" + x + "和" + y); // 控制结构 if (x > 0) { System.out.println("x 是正数"); } else if (x < 0) { System.out.println("x 是负数"); } else { System.out.println("x 是零"); } for (int i = 1; i <= x; i++) { System.out.println(i); } // 函数和方法 public static double add(double a, double b) { return a + b; } double result = add(x, y); System.out.println("x 和 y 的和为：" + result); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值