zoukankan      html  css  js  c++  java
  • css3的伪(伪类和伪元素)大合集

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

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

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

  • 相关阅读:
    rest framework 认证 权限 频率
    rest framework 视图,路由
    rest framework 序列化
    10.3 Vue 路由系统
    10.4 Vue 父子传值
    10.2 Vue 环境安装
    10.1 ES6 的新增特性以及简单语法
    Django 跨域请求处理
    20190827 On Java8 第十四章 流式编程
    20190825 On Java8 第十三章 函数式编程
  • 原文地址:https://www.cnblogs.com/ibingbing/p/5850703.html
Copyright © 2011-2022 走看看