热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

伪类和伪元素,终于分清了。。

:before:after是被当做DOM元素来用的,所以是伪元素。:first-childlast-childnth-child这些,其实最终是选择了一个DOM,是CSS的选择器的功能,所以是
:before :after是被当做DOM元素来用的,所以是伪元素。

:first-child last-child nth-child 这些,其实最终是选择了一个DOM,是CSS的选择器的功能,所以是伪类。

伪元素在标准里其实应该是::after(两个冒号),和伪类一个冒号是不一样的写法。
只因老版的浏览器没有区分这两个概念,都是用单冒号来表示的。
所以现在写伪元素还是用单冒号做兼容。

伪类:

:link

伪类将应用于未被访问过的链接,与:visited互斥。

:visited

伪类将应用于已经被访问过的链接,与:link互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

:first-child

伪类将应用于元素在页面中第一次出现的时候。

:lang

伪类将应用于元素带有指定lang的情况。


伪元素:

:first-letter

伪元素的样式将应用于元素文本的第一个字(母)。

:first-line

伪元素的样式将应用于元素文本的第一行。

:before

在元素内容的最前面添加新内容。

:after

在元素内容的最后面添加新内容。





推荐阅读
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 本文介绍如何通过HTML和CSS构建一个美观且功能齐全的水平导航栏,包括不同的布局方法及其效果。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 创建一个响应式的多级导航菜单是前端开发中的常见任务。本文详细介绍如何使用 CSS 实现一个横向一级菜单和纵向子菜单的结构,确保在不同浏览器和屏幕尺寸下都能正常工作。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 反向投影技术主要用于在大型输入图像中定位特定的小型模板图像。通过直方图对比,它能够识别出最匹配的区域或点,从而确定模板图像在输入图像中的位置。 ... [详细]
  • 基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发
    本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 优雅实现 jQuery 折叠展开下拉菜单
    本文介绍了一种使用 jQuery 实现的优雅折叠和展开效果的下拉菜单,通过简单的 HTML 结构和 CSS 样式,结合 jQuery 脚本,可以轻松创建出美观且功能强大的下拉菜单。 ... [详细]
  • 开发笔记:精通 CSS 第 10 章 变换过渡与动画 学习笔记
    开发笔记:精通 CSS 第 10 章 变换过渡与动画 学习笔记 ... [详细]
  • 深入探讨Web页面中的锚点交互设计
    本文旨在分享Web前端开发中关于网页锚点效果的实现与优化技巧。随着Web技术的发展,越来越多的企业开始重视前端开发的质量和用户体验,而锚点功能作为提升用户浏览体验的重要手段之一,值得深入研究。 ... [详细]
author-avatar
mobiledu2502886767
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有