伪类和伪元素,review

总是分不太清楚,然后容易忘记这个概念,项目中又遇到了,复习一遍

问题

1.哪些常用的伪类?伪元素?

怎么记:
除了4个伪元素,其他都是伪类

哪四个伪元素?:before :after :first-letter :first-line

伪类
:first-child
:link
:visited
:hover
:active

2.伪类和伪元素的区别

想想常用:before :after 用来干嘛?

遇到的比较多的是在元素前后插入图片,或者清除浮动

h1:before
  {
  content:url(logo.gif);
  }

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

.clearfix:after{
    content:"";				/*设置内容为空*/
    height:0;				/*高度为0*/
    line-height:0;			/*行高为0*/
    display:block;			/*将文本转为块级元素*/
    visibility:hidden;		/*将元素隐藏*/
    clear:both;				/*清除浮动*/
}
.clearfix{
    zoom:1;					/*为了兼容IE*/
}


定义:

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式,例如:before和:after能够访问产生的内容。

想想常用伪类用来干嘛?

匹配元素

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

选择器匹配作为任何元素的第一个子元素的 <p> 元素

p:first-child
{
    color:blue;
}

定义

伪类其实就是基于普通DOM元素而产生的不同状态,他是DOM元素的某一特征。

3.总结

一句话总结不同之处就是,伪元素产生新对象,在DOM树中看不到,但是可以操作;伪类不产生新的对象,仅是DOM中一个元素的不同状态;

css3中,为了区别和标准化,伪元素修改为以 :: 开头,但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

参考资料

文章1
文章2

posted @ 2019-11-05 15:00  shipskunkun  阅读(133)  评论(0编辑  收藏  举报