热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS中的伪类和伪元素回顾

伪类css2.1,合法伪类只有a标签有,linkvisitedhoveractivep
伪类                 
      css2.1, 合法伪类只有 a 标签有, link  visited  hover  active
            p:hover: 现在人人都有, IE7兼容, 其他三个还是只有 a 有.
            p:foucus: 得到焦点的元素.
            ----(下面是和表单有关的)-----
            p:checked: 被选中的元素.
            p:disabled: 可用的 
            p:enabled: 不可用的
            ----(下面是和节点关系有关的)------
            p:empty: 没有任何节点内容的(空格也算内容).
            p: 匹配文档的根元素, 永远是 HTML 这个根标签. 
            以上 IE8 兼容.
 
伪元素
      伪元素是CSS3新增的, 用 :: 来表示伪元素(IE9).
            p::before{
                  content: "哈哈"  --- 必须存在, 表示要添加的文本, 不需要添加文字可写 ""
            }
            p::after{
                  content: "哈哈"  --- 必须存在, 表示要添加的文本, 不需要添加文字可写 ""
            }            
            ::before 和 ::after 默认是行内元素, 必要时要转块(脱离标准流即可).
            li::before{
                  content:"";
                  float: left;
                  width: 16px;
                  等等...
            }
 
      可应用于清除浮动:
      比如有上下俩 div, 没有宽高, 内部都浮动了4个有宽高的 p, 试问清除浮动的方法?
      解决方法:
            1. 给 div 高度.
            2. 给 div 加 overflow: hidden
            3. 给下面的 div clear: both, 不好用, margin 失效, 还是没有高度. 
            4. 内墙法, 给上面的 div 加一个空盒子并 clear: both.但不符合语义化.
            5. 用::before 或 ::after 当做内墙来清除浮动.
   
 
--------------------------------------------------------------------------------------------------------
            
 
伪对象
     p::first-letter   p 标签中的首个单词
      p::first-line     p 标签中的第一行
     p::selection    p 标签中的被选中的文本
 
 -------------------------------------------------------------------------------------------------------
 
以上写出的并不全, 在此抛砖引玉, 有误导之处还请不吝指点 ^^.

推荐阅读
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 网站前端开发的核心理念与必备技能解析 ... [详细]
  • Markdown语法说明:http:www.appinn.commarkdown1、前端碎片知识总结篇1.1关于浏览器IE的内核是Trident、Mozilla的内核 ... [详细]
  • 每日前端实战:148# 视频教程展示纯 CSS 实现按钮两侧滑入装饰元素的悬停效果
    通过点击页面右侧的“预览”按钮,您可以直接在当前页面查看效果,或点击链接进入全屏预览模式。该视频教程展示了如何使用纯 CSS 实现按钮两侧滑入装饰元素的悬停效果。视频内容具有互动性,观众可以实时调整代码并观察变化。访问以下链接体验完整效果:https://codepen.io/comehope/pen/yRyOZr。 ... [详细]
  • 通过纯CSS技术,可以轻松创建精致的小圆点和三角形图形。本文详细介绍了如何利用CSS的伪元素、边框和背景属性,实现这些图形的高效绘制,并提供了多种应用场景和示例代码,帮助开发者在网页设计中增添更多视觉效果。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 使用React与Ant Design 3.x构建IP地址输入组件
    本文深入探讨了利用React框架结合Ant Design 3.x版本开发IP地址输入组件的方法。通过详细的代码示例,展示了如何高效地创建具备良好用户体验的IP输入框,对于前端开发者而言具有较高的实践指导意义。 ... [详细]
  • CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果 ... [详细]
  • 滑动显示大图升级版
    之前做了一个滑动展示大图片的demo,之后在大神博客发现大神也做过一个类似的插件。于是把插件摘了下来研究了一下。改动了插件显示文本的部分并增加了一点注释。效果比我的好 ... [详细]
  • CSS深入剖析text和column
    这里写目录标题一、text-shadow二、font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似,这里通过 ... [详细]
  • vue日历/日程提醒/html5本地缓存
    先上图 功能:1、上拉日历折叠,展示周2、左右滑动切换月2、“今天”回到今天;“+”添加日程3、localStorage存储日程index,html<body><divid"app"v-cloak@mousedown"down&am ... [详细]
  • DW的div布局
    如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提 ... [详细]
  • css3伪类target实现tab切换
    CSS3target伪类不得不说那些事儿(纯CSS实现tab切换)是不是觉得target有点眼熟?!今天要讲的不是HTML的标签里面有个targe ... [详细]
  • Div+CSS网站布局入门教程(转载)
    在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等设置div的宽度。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学 ... [详细]
author-avatar
小果康康维五_469
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有