hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • 怎么解决移动端1px问题
  • 说一说对BFC的理解
  • CSS的盒子模型
  • 说一说对flex布局的认识
  • 网格布局
  • 伪类选择器和伪元素
    • 怎么实现响应式布局
    • css中的选择器有哪些、哪些可以继承
    • 如何做移动端适配
    • 如何清除浮动
    • em、rem区别
    • display none与visibility hidden的区别
    • z-index失效的场景
    • 在页面上隐藏元素的方法有哪些
    • css选择器中first-child与first-of-type的区别
    • 用css绘制三角形及其原理
    • 说一说box-sizing属性
    • 说一说水平垂直居中的布局方法
    • CSS 常见布局方式
    • CSS3的新特性有哪些
    • 圣杯布局和双飞翼布局
    • inline、block、inline-block这三个属性值有什么区别
    • 说一说css的预处理器
    • 如果要做优化,CSS提高性能的方法有哪些
    • CSS3常见动画有哪些
    • 怎样画一条0点5px的线
    • CSS
    guoguoqiqi
    2022-02-13

    伪类选择器和伪元素

    # 两者的区别

    1. 伪类表示被选择元素的某种状态,例如:hover

    2. 伪元素表示的是被选择元素的某个部分,这个部分看起来像一个独立的元素,但是是"假元素",只存在于css中,所以叫"伪"的元素,例如:before和:after

    核心区别在于,是否创造了“新的元素”

    # 伪元素

    image

    # 伪类

    image

    # 总结

    伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

    :Pseudo-classes
    ::Pseudo-elements
    
    1
    2

    但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

    # 参考文章链接

    详解 CSS 属性 - 伪类和伪元素的区别 (opens new window)
    【前端入门必知必会】css 伪类和伪元素选择器 (opens new window)
    一篇搞清伪类和伪元素 (opens new window)

    ← 网格布局 怎么实现响应式布局→

    最近更新
    01
    vuex数据持久化怎么做
    05-22
    02
    vue的动态路由怎么配置使用
    05-22
    03
    vue权限控制一般怎么做
    05-22
    更多文章>
    Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式