博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS中的伪类和伪元素回顾
阅读量:5112 次
发布时间:2019-06-13

本文共 1136 字,大约阅读时间需要 3 分钟。

伪类                 
      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 标签中的被选中的文本
 
 -------------------------------------------------------------------------------------------------------
 
以上写出的并不全, 在此抛砖引玉, 有误导之处还请不吝指点 ^^.

转载于:https://www.cnblogs.com/vlovecode/p/5959931.html

你可能感兴趣的文章
类库与框架,强类型与弱类型的闲聊
查看>>
webView添加头视图
查看>>
php match_model的简单使用
查看>>
在NT中直接访问物理内存
查看>>
Intel HEX 文件格式
查看>>
SIP服务器性能测试工具SIPp使用指导(转)
查看>>
回调没用,加上iframe提交表单
查看>>
(安卓)一般安卓开始界面 Loding 跳转 实例 ---亲测!
查看>>
Mysql 索引优化 - 1
查看>>
LeetCode(3) || Median of Two Sorted Arrays
查看>>
大话文本检测经典模型:EAST
查看>>
待整理
查看>>
一次动态sql查询订单数据的设计
查看>>
C# 类(10) 抽象类.
查看>>
Vue_(组件通讯)子组件向父组件传值
查看>>
jvm参数
查看>>
我对前端MVC的理解
查看>>
Silverlight实用窍门系列:19.Silverlight调用webservice上传多个文件【附带源码实例】...
查看>>
2016.3.31考试心得
查看>>
mmap和MappedByteBuffer
查看>>