前端笔记——伪类的使用

1.简单介绍

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

2.E::before和E::after的注意事项

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值：

• String 使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
• attr() 通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。test/3.html
• url()/uri() 用于引用媒体文件。test/3.html
• counter() 调用计数器，可以不使用列表元素实现序号功能。配合counter-increment和counter-reset属性使用：

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

3.伪元素的使用

一：清除浮动

二：模拟float:center的效果 test/4.html

三：做出各种图形效果

四：不使用图片创造小图标

五：显示打印网页的URL

六：给blockquote添加引号

七：超链接特效

八：：：before和：：after实现多背景图片

4.其他伪元素

E::first-line{ } 设置对象内的第一行的样式。此伪元素仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。

E::first-letter{ } 设置对象内的第一个字符的样式。此伪元素仅作用于块对象。内联对象要使用该伪元素，必须先将其设置为块级对象。该伪元素常被用来配合font-size属性和float属性制作首字下沉效果。