伪类和伪元素概念

伪元素:伪元素主要是用来创建一些不存在于原有dom结构树中的元素。

例如:用::before和::after在一些存在的元素前后添加文字样式等,这些被添加的内容会以具体的UI显示出来,被用户所看到的,这些内容不会改变文档的内容,不会出现在DOM中,不可复制,仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素,如:div::before。
伪类和伪元素概念
::before和::after这两个伪类下有特有的属性content,必须有这个属性。
伪类和伪元素概念

1、attr() 调用当前元素的属性,可以方便的比如将图片的Alt提示文字或链接的Href地址显示出来,如下:

  a:after {
    content: "(" attr(href) ")";
  }

2、url() / uri() 用于引入媒体文件

 h1:before{
    content: url(log.png);
  }

3、counter() 调用计数器,可以不使用列表元素实现序号功能。

  h2:before{
    counter-increment: chapter;
    content: "Chapter" counter(chapter) ". "
  }

伪类:表示已存在的某个元素处于某种状态,但是通过dom树又无法表示这种状态,就可以通过伪类来为其添加样式。

例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素,如:a:hover
伪类和伪元素概念
伪类和伪元素概念

上一篇:操作系统学习笔记——第二章 进程的描述与控制(二)


下一篇:AUTOSAR DEM Configuration