您现在的位置是：网站首页> 编程资料编程资料

CSS3中的常用选择器使用示例整理css3之UI元素状态伪类选择器实例演示总结30个CSS3选择器 css3类选择器之结合元素选择器和多类选择器用法IE8下CSS3选择器nth-child() 不兼容问题的解决方法对CSS3选择器的研究(详解)详解CSS3中属性选择器新增加的特性CSS3 新增选择器的实例

2021-09-05 790人已围观

简介 这篇文章主要介绍了CSS3中的常用选择器使用示例整理,是CSS3入门学习中的基础知识,需要的朋友可以参考下

1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.

CSS Code复制内容到剪贴板
  1.   
  2.   
  3. :root选择器的演示
      

2. 否定选择器 :not
否定选择器, 就是除此之外的

CSS Code复制内容到剪贴板
  1.   
  2.   
  3. "#">   
  4.     
      
  5.         "name">账号:   
  6.         "text" name="name" id="name" placeholder="请填写账号" />   
  7.     
  
  •     
      
  •         "password">密码:   
  •         "password" name="password" id="password" placeholder="请填写密码" />   
  •     
    •   
  •     
      
  •         "submit" value="Submit" />   
  •     
    •   
  •   

    • 3. 空选择器 :empty
    注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. 我这里有内容
        
    4.  
        
    5.   

    4.目标选择器 :target
    超链接地址, 与id对应

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.   

    4. "#test">test

        
    5. "not_show" id="test">   
    6.     这是一个测试   
      
  •   
  •   

  • "#pipi">pipi

      
  • "pipi">   
  •     content for pipi   
    •   
  •   

  • "#ruby">ruby

      
  • "ruby">   
  •     content for ruby   
  •   
  •   

  • "#aaron">Brand

      
  • "aaron">   
  •     content for aaron   
  •   

    • 5. 第一个与最后一个子元素 :first-child :last-child

    CSS Code复制内容到剪贴板
    1.   
      2.   
      •   
      • "##">Link1
        •   
      •   
      • "##">Link2
        •   
      •   
      • "##">Link3
        •   
      •   
      • "##">Link4
        •   
      •   
      • "##">Link5
        •   
        

    6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)

    CSS Code复制内容到剪贴板
    1.   
      2.   
      •     
      • item1
        •   
      •     
      • item2
        •   
      •     
      • item3
        •   
      •     
      • item4
        •   
      •     
      • item5
        •   
      •     
      • item6
        •   
      •     
      • item7
        •   
      •     
      • item8
        •   
      •     
      • item9
        •   
      •     
      • item10
        •   
        


    7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type

    CSS Code复制内容到剪贴板