伪类和伪元素

已于 2023-02-06 15:32:05 修改
阅读量65 收藏
点赞数
分类专栏： css 文章标签： css
于 2023-02-03 17:01:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limpid_changli/article/details/128871057
版权

伪类

可以用于操作dom流中已存在的节点，控制节点特定状态。

常用的伪类：

n的常见值为1，2，3，odd，even

:first-child
:last-child
:nth-child(n)
:first-of-type
:last-of-type
:nth-of-type(n)
:link
:active
:hover
:visited
:focus
:left
:right
:first

伪元素

可以创建一个dom流中不存在的元素，与已存在的某个元素存在关联。

常见伪元素：
::before
::after

玉米米是一只喵~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
伪类、伪元素实例
03-20
https://mp.csdn.net/postedit/88689169 伪类选择元素基于的是当前元素处于的状态，或者说是元素当前所具有的...伪元素是对元素中特定内容进行操作的，它所操作的层次比伪类更深一层，也因此它的动态性比伪类要低很多。
浅谈CSS伪类与伪元素
09-25
本文向大家展示了CSS的伪类与伪元素，介绍的非常全面，这里推荐给大家参考下。
伪类和伪元素的区别
青颜的天空的博客
03-16 827
1.什么是伪类？ 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。 伪类就是开头为冒号的关键字： :pseudo-class-name **解读：**伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条
CSS伪类和伪元素
W2279567793的博客
04-19 3410
伪类和伪元素
伪类和伪元素详解
jiangjialuan2的博客
06-02 994
什么是伪类和伪元素？ 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类，用于向某些选择器添加特殊的效果，伪类的效果可以通过添加实际的类来实现。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中，用于将特殊的效果添加到某些选择器。伪元素的效果可以通过添加实际的元素来实现。伪类选择符有哪些？伪元素有哪些1）注意伪类只能使用":“;而伪元素即可以使用”:“,也可以使用”::":after/::afte
CSS中的伪类和伪元素（详细）
热门推荐
m0_52083530的博客
01-21 1万+
这篇想要跟大家分享的是css中的伪类和伪元素，有任何问题可以私聊我或者评论哦！ 首先，我们先来想一下，为什么要引入伪类跟伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪类，伪元素？ 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:h
CSS伪类和伪元素的区别详解
09-25
在权重方面，伪元素的权重高于伪类，这意味着当一个容器的伪元素和伪类具有相同的属性但值不同时，会优先采用伪元素的样式。此外，根据规范，伪元素在一个页面中只应用一次，而伪类可以多次使用，这反映了它们在设计...
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
flex：1
m0_47999208的博客
07-25 337
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 379
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS相关记录
oThrowsException的博客
07-24 746
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1249
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
Vue 3 + Vite 项目中安装 Tailwind CSS
lq099526的专栏
07-22 419
安装 Tailwind CSS步骤，失效，样式不加载
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 553
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
CSS 基础
不能再留遗憾了的博客
07-23 434
后端程序员必须掌握的CSS知识
【CSS】响应式设计
小秀的博客
07-24 308
响应式设计是指通过⼀些技术⼿段，使得⽹站或应⽤在不同终端设备（如桌⾯电脑、平板电脑、⼿机等）上能够⾃适应地呈现最佳的⽤户体验。⼀种实现⽅式是使⽤等技术，以便根据设备屏幕的宽度和⾼度等信息⾃适应地调整⻚⾯的布局和元素的⼤⼩。另⼀种实现⽅式是使⽤，根据设备的屏幕尺⼨和分辨率等信息，加载不同的样式⽂件或应⽤不同的样式规则，以便实现不同场景下的最佳效果。
css气泡背景特效
u011626414的专栏
07-23 295
动画是可选的，并且它实际上并不创建额外的气泡效果，而只是让整个背景有微妙的移动。如果你想要更多的气泡，并且希望它们随机出现和消失，你可能需要使用JavaScript或更复杂的CSS动画来生成它们。此外，你可以通过添加更多的伪元素、改变它们的尺寸、颜色、动画延迟和持续时间等来创建更复杂和多样化的气泡效果。要创建一个CSS气泡背景特效，你可以使用CSS的伪元素（属性来创建圆形或椭圆形的“气泡”，以及。属性来设置背景和动画效果。请注意，上述示例中的。
第二十八天 CSS之字体属性
out_stand_ing的博客
07-21 403
前端大佬的修炼之路 筑基期第五层
伪类和伪元素有什么区别
07-24
伪类和伪元素是CSS中的两个概念，它们的作用是为选择器提供额外的选择能力。 伪类（Pseudo-class）是用于选择元素的特殊状态或行为的关键词，它们以冒号（:）开头。例如，:hover用于选择鼠标悬停在元素上的状态，:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值