CSS3 伪类和伪元素

最新推荐文章于 2023-01-18 09:00:00 发布
最新推荐文章于 2023-01-18 09:00:00 发布
阅读量241 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/extendworld/article/details/78715026
版权

总结伪类和伪元素

伪类：伪装class来选择元素，所以叫伪类

状态伪类：5个

由于状态伪类的用法大家都十分熟悉，这里就不用例子说明了。
1 :link
选择未访问的链接
2 :visited
选择已访问的链接
3 :hover
选择鼠标指针浮动在其上的元素
4 :active
选择活动的链接
5 :focus
选择获取焦点的输入字段

结构化伪类：10个
:first-child
:last-child
:nth-child
:first-of-type
:last-of-type
:nth-last-child
:nth-of-type
:only-child
还有表单相关伪类

伪元素

::after, ::before

extendworld
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Less的简单使用（三）——extend的用法
疯子i的博客
06-01 2415
Less的简单使用（三）——Extend的用法 Extend是一个Less伪类，通过:extend在一个选择器中扩展其他选择器样式，从而与匹配其引用的选择器合并。 一、Extend的简单使用 .less文件中的代码： // Extend nav ul { &:extend(.line); background-color: lightgray; } .line { ...
less 技巧 css extend
m0_62030960的博客
11-04 848
:extend是一个伪类，使用它的选择器，将和它引用的选择器一起使用它引用的选择器的样式，如： 先定义一个扩展的选择器，我们就叫它 .a，然后定义一个选择器 .b（用来扩展），在 .a内使用 :extend 扩展，代码如下: .a{ &:extend(.b); //这里的 & 为 父选择符，代表的 父选择符 .a 扩展 .b font-size: 12px; } .b{ font-weight: bold; } 输出： .a { font-size:
css的继承（extend）和混入的用法，操作符、模块化
weixin_43400431的博客
06-24 629
css的继承（extend）和混入的用法，操作符、模块化
CSS3伪类和伪元素
qq_36412715的博客
08-12 651
1.伪类 CSS3给出的定义是： 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。 通过上面的概念我们知道了伪类的功能有两种： 1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。 2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取...
css3 伪类与伪元素
qq_35779012的博客
08-02 118
一、什么是伪类？ 伪类用于定义元素的特殊状态。 例如，它可以用于： 设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式 语法： selector:pseudo-class { property: value; } 示例： /* 未访问的链接 */ a:link { color: #FF0000; } /* 已访问的链接 */ a:visited { color: #00FF00; } /* 鼠标悬停链接 */ a:hover {
CSS 伪类
QYgujingjing的专栏
01-18 2841
CSS 伪类
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
CSS伪类和伪元素的区别详解
09-25
伪类和伪元素不是真正意义上的html存在的类和元素,他们的存在是为了方便对状态和位置进行样式定义。具体他们之间有什么区别呢，这就是今天我们需要讨论的问题了
浅谈CSS伪类与伪元素
09-25
本文向大家展示了CSS的伪类与伪元素，介绍的非常全面，这里推荐给大家参考下。
CSS3伪类和伪元素的特性和区别
weixin_34068198的博客
03-19 165
前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及&lt;a&gt;标签的:link、visited等，伪元素较常见的比如:before、:after等。 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地...
浅谈CSS伪类和伪元素及CSS3新增伪类
筱葭的博客
02-28 8686
p:first-of-type 选择属于其父元素的首个元素的每个元素。 p:last-of-type   选择属于其父元素的最后元素的每个元素。 p:only-of-type   选择属于其父元素唯一的元素的每个元素。 p:only-child    选择属于其父元素唯一的子元素的每个元素。 p:nth-child(n)   选择属于其父元素的第n个子元素的每个元素。
浅析CSS3中伪元素和伪类
boyikenan123的博客
04-26 319
伪元素 伪元素本身不存在DOM文档中，它只是逻辑上的存在，无法通过JS获取改变它 用,例如：用::before和::after 在一些存在的元素前后添加文字样式等，这些被添加的内用会以具体的UI显示出来，被用户看到，这些内容不会改变文档的内容，不会出现在DOM 中，不会被复制。仅仅在CSS渲染层加入。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title
css3伪类和伪元素基本使用
shadow_zed的博客
07-09 531
一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。 这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。 所以不要用:
CSS3伪类和伪元素的特性和区别尤其是 ::after和::before
dongjiong0213的博客
06-02 220
伪类和伪元素的理解 官方解释： 伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 我自己的理解： 伪类，类，class是一个类，就类似class这...
CSS3伪类与伪元素的区别及注意事项
热门推荐
尐轩web前端网络日志
12-10 1万+
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 讲道理，可能我语文不好，我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概
styled-components 基础使用一[css, extend,attrs,&&,as,withComponent]
宏斌的博客
01-30 1523
代码片段 css import styled, { css } from "styled-components"; const flexCenter = css` justify-content: center; align-items: center; flex-direction: column; `; 使用： const Card = styled.div` ${flexCenter} //根据props判断 ${(props) => props.center ? f
CSS3 伪元素和伪类
cithegod的博客
07-27 750
CSS3 伪元素 伪类 应用 聊天气泡
css3新增伪类 伪元素
qq_14993591的博客
06-27 381
<!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> .para { .
css 伪元素和伪类
最新发布
01-25
CSS中的伪类和伪元素是用来选择文档中特定元素的一种方式。它们可以帮助我们对元素进行样式化或者添加特定的效果。伪类和伪元素的区别在于它们的语法和作用对象。 1. 伪类（Pseudo-classes）：伪类用于选择处于特定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值