css3的伪（伪类和伪元素）大合集

Posted 2020-08-07 i冰冰

本文讲css3的伪，不是讲它有多虚伪，而是说它的伪元素样式。不得不说以前虽知html伪元素，但很少用，后得知借助css3伪元素可以发挥极大的便利。故总结css3的伪如下：

CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪:link，:visited，:hover，:active等。除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。

如下将一一介绍各伪类的用法。

CSS 伪类 (Pseudo-classes)实例：

超链接

本例演示如何向文档中的超链接添加不同的颜色。

-------------------------------------------

超链接 2

本例演示如何向超链接添加其他样式。

:link 选择器对指向未被访问页面的链接设置样式, 

:hover 选择器用于设置鼠标指针浮动到链接上时的样式，

:active选择器用于设置点击链接时的样式。

:visited 选择器用于选取已被访问的链接。

--------------------------------------------------

超链接 - :focus 的使用

本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。focus选择获得焦点的输入字段，并设置其样式。:focus 选择器用于选取获得焦点的元素。提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

当输入框获得焦点时，改变它的背景色：

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

亲自试一试

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。blur失去焦点。

触发 focus 事件

语法

$(selector).focus()

亲自试一试

将函数绑定到 focus 事件

语法

$(selector).focus(function)

亲自试一试

----------------------------------

:first-child（首个子对象）

本例演示 :first-child 伪类的用法。first-child是父元素的首个子元素。

text-transform用于转换不同元素中的文本，text-transform 属性控制文本的大小写。

h1 {text-transform:uppercase}大写
h2 {text-transform:capitalize}混写
p {text-transform:lowercase}小写

----------------------------------------------------------------------------

:lang（语言）

本例演示 :lang 伪类的用法。:lang 选择器用于选取带有以指定值开头的 lang 属性的元素。注释：该值必须是整个单词，即可是单独的，比如 lang="en"，也可后跟连接符，比如 lang="en-us"。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。
这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。 

在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。现总结content插入情况如下：

一 插入纯文字

content:"插入的文章"，或者content:none不插入内容
html:

XML/HTML Code复制内容到剪贴板

1. <h1>这是h1</h1>  
2. <h2>这是h2</h2>  

css

CSS Code复制内容到剪贴板

1. h1::after{   
2.     content:"h1后插入内容"  
3. }   
4. h2::after{   
5.     content:none  
6. }  

运行结果：

这是h1h1后插入内容

这是h2

二 嵌入文字符号

可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号，close-quote用于添加结束的文字符号。修改上述的css:

CSS Code复制内容到剪贴板

1. h1{   
2.     quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/  
3. }   
4. h1::before{   
5.     content:open-quote;   
6. }   
7. h1::after{   
8.     content:close-quote;   
9. }   
10. h2{   
11.     quotes:"\\"" "\\"";  /*添加双引号要转义*/  
12. }   
13. h2::before{   
14.     content:open-quote;   
15. }   
16. h2::after{   
17.     content:close-quote;   
18. }  

运行结果：

(这是h1)

\\这是h2\\

三 插入图片

content属性也可以直接在元素前/后插入图片
html:

XML/HTML Code复制内容到剪贴板

1. <h3>这是h3</h3>  

css:

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

运行结果：

这是h3（此处有图片）

四 插入元素的属性值

content属性可以直接利用attr获取元素的属性，将其插入到对应位置。
html:

XML/HTML Code复制内容到剪贴板

1. <a href="http://www.cnblogs.com/ibingbing">这是链接  </a>  

css:

CSS Code复制内容到剪贴板

1. a:after{   
2.     content:attr(href);   
3. }  

运行结果：

这是链接http://www.cnblogs.com/ibingbing

五 插入项目编号

利用content的counter属性针对多个项目追加连续编号.
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题</h1>  
2. <p>文字</p>  
3. <h1>大标题</h1>  
4. <p>文字</p>  
5. <h1>大标题</h1>  
6. <p>文字</p>  
7. <h1>大标题</h1>  
8. <p>文字</p>  

css:

CSS Code复制内容到剪贴板

1. h1:before{   
2.     content:counter(my)\'.\';   
3. }   
4. h1{   
5.     counter-increment:my;   
6. }  

运行结果：

大标题

文字

大标题

文字

大标题

文字

大标题

文字

counter-increment对部分和子部分进行编号（比如 "Section 1"、"1.1"、"1.2"）的方法：

body
  {
  counter-reset:section;
  }

h1
  {
  counter-reset:subsection;
  }

h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }

h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
  }

亲自试一试

所有浏览器都支持 counter-increment 属性。

注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。

counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。

利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。

注释：如果使用了 "display: none"，则无法增加计数。如使用 "visibility: hidden"，则可增加计数。

六 项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

1. h1:before{   
2.     content:\'第\'counter(my)\'章\';   
3.     color:red;   
4.     font-size:42px;   
5. }   
6. h1{   
7.     counter-increment:my;   
8. }  

运行结果：

大标题

文字

大标题

文字

大标题

文字

大标题

文字

七 指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

1. h1:before{   
2.     content:counter(my,upper-alpha);   
3.     color:red;   
4.     font-size:42px;   
5. }   
6. h1{   
7.     counter-increment:my;   
8. }  

运行结果：

大标题

文字

大标题

文字

大标题

文字

大标题

文字

八 编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题</h1>  
2. <p>文字1</p>  
3. <p>文字2</p>  
4. <p>文字3</p>  
5. <h1>大标题</h1>  
6. <p>文字1</p>  
7. <p>文字2</p>  
8. <p>文字3</p>  
9. <h1>大标题</h1>  
10. <p>文字1</p>  
11. <p>文字2</p>  
12. <p>文字3</p>  

css:

CSS Code复制内容到剪贴板

1. h1::before{   
2.     content:counter(h)\'.\';   
3. }   
4. h1{   
5.     counter-increment:h;   
6. }   
7. p::before{   
8.     content:counter(p)\'.\';   
9. }   
10. p{   
11.     counter-increment:p;   
12. }  

运行结果：

1.大标题

1.文字1

2.文字2

3.文字3

2.大标题

4.文字1

5.文字2

6.文字3

3.大标题

7.文字1

8.文字2

9.文字3

在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

CSS Code复制内容到剪贴板

1. h1{   
2.     counter-increment:h;   
3.     counter-reset:p;   
4. }  

这样，编号就重置了，看看结果：

1.大标题

1.文字1

2.文字2

3.文字3

2.大标题

1.文字1

2.文字2

3.文字3

3.大标题

1.文字1

2.文字2

3.文字3

还可以实现更复杂的嵌套，例如三层嵌套。
html:

XML/HTML Code复制内容到剪贴板

1. <h1>大标题</h1>  
2. <h2>中标题</h2>  
3. <h3>小标题</h3>  
4. <h3>小标题</h3>  
5. <h2>中标题</h2>  
6. <h3>小标题</h3>  
7. <h3>小标题</h3>  
8. <h1>大标题</h1>  
9. <h2>中标题</h2>  
10. <h3>小标题</h3>  
11. <h3>小标题</h3>  
12. <h2>中标题</h2>  
13. <h3>小标题</h3>  
14. <h3>小标题</h3>  

css:

CSS Code复制内容到剪贴板

1. h1::before{   
2.     content:counter(h1)\'.\';   
3. }   
4. h1{   
5.     counter-increment:h1;   
6.     counter-reset:h2;   
7. }   
8. h2::before{   
9.     content:counter(h1) \'-\' counter(h2);   
10. }   
11. h2{   
12.     counter-increment:h2;   
13.     counter-reset:h3;   
14. }   
15. h3::before{   
16.     content:counter(h1) \'-\' counter(h2) \'-\' counter(h3);   
17. }   
18. h3{   
19.     counter-increment:h3;   
20. }  

运行结果：

1.大标题

1-1中标题

1-1-1小标题

1-1-2小标题

1-2中标题

1-2-1小标题

1-2-2小标题

2.大标题

2-1中标题

2-1-1小标题

2-1-2小标题

2-2中标题

2-2-1小标题

2-2-2小标题

 最后，css3伪类和伪元素的区别如下：

伪类用于向某些选择器添加特殊的效果。

伪元素用于将特殊的效果添加到某些选择器。