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

时间：2022-02-13 04:18:11

本文讲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伪类和伪元素的区别如下：

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

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

标签：

相关文章