您现在的位置是：网站首页>列表内容

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

2023-10-22 13:59:02 154人已围观

简介 这篇文章主要介绍了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复制内容到剪贴板
    1.   
    2.   
    3. "wrapper">   
    4.     
      我是一个块元素，我是.wrapper的第一个子元素
        
    5.     

      我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素

        
    6.     

      我是一个段落元素

        
    7.     
      我是一个块元素
        
      

    8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "wrapper">   
    4.     
      我是一个Div元素
        
    5.     

      我是一个段落元素

        
    6.   
    7.     
      我是一个Div元素
        
    8.     

      我是一个段落

        
    9.   
    10.     
      我是一个Div元素
        
    11.     

      我是一个段落

        
    12.   
    13.     
      我是一个Div元素
        
    14.     

      我是一个段落

        
    15.   
    16.     
      我是一个Div元素
        
    17.     

      我是一个段落

        
    18.   
    19.     
      我是一个Div元素
        
    20.     

      我是一个段落

        
    21.   
    22.     
      我是一个Div元素
        
    23.     

      我是一个段落

        
    24.   
    25.     
      我是一个Div元素
        
    26.     

      我是一个段落

        
      

    9. 唯一子元素选择器 only-child
    匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "post">   
    4.     

      我是一个段落

        
    5.     

      我是一个段落

        
      
  • "post">   
  •     

    我是一个段落

      
    •   

    10. 唯一匹配类型的子元素 only-of-type

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "wrapper">   
    4.     

      我是一个段落

        
    5.     

      我是一个段落

        
    6.     

      我是一个段落

        
    7.     
      我是一个Div元素
        
      
  • "wrapper">   
  •     
    我是一个Div
      
  •     
        
    •         
    • 我是一个列表项
      •   
    •     
      
  •     

    我是一个段落

      
    •   

    11. 可用选择器 :enabled

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "#">   
    4.     
        
    5.         "name">Text Input:   
    6.         "text" name="name" id="name" placeholder="可用输入框"  />   
    7.     
      
  •     
      
  •         "name">Text Input:   
  •         "text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />   
  •     
    •   
  •   

    • 12. 不可用选择器 :disabled

    CSS Code复制内容到剪贴板
    1.   
    2. "#">   
    3.     
        
    4.         "text" name="name" id="name" placeholder="我是可用输入框" />   
    5.     
      
  •     
      
  •         "text" name="name" id="name" placeholder="我是不可用输入框" disabled />   
  •     
    •   
  •   

    • 13. 被选中选择器 :checked

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "#">   
    4.     "wrapper">   
    5.         "box">   
    6.           "checkbox" checked="checked" id="usename" />√   
    7.         
      
  •         "usename">我是选中状态   
  •     
    •   
  •   
  •     "wrapper">   
  •         "box">   
  •           "checkbox"  id="usepwd" />√   
  •            
  •         "usepwd">我是未选中状态   
  •        
  •   

    • 14. 被鼠标选中, 高亮选择器 ::selection

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

    2. 拿鼠标选中我, 试试看!

        

    15. 只读选择器 :read-only

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "#">   
    4.     
        
    5.         "name">姓名:   
    6.         "text" name="name" id="name" placeholder="大漠" />   
    7.     
      
  •     
      
  •         "address">地址:   
  •         "text" name="address" id="address" value="中国上海" readonly />   
  •     
    •   
  •   

    • 16. 非只读选择器 :read-write

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. "#">   
    4.     
        
    5.         "name">姓名:   
    6.         "text" name="name" id="name" placeholder="大漠" />   
    7.     
      
  •     
      
  •         "address">地址:   
  •         "text" name="address" id="address" placeholder="中国上海" readonly="readonly" />   
  •     
    •   
  •   

    • 转载：感谢您对网站平台的认可，以及对我们原创作品以及文章的青睐， 非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处。

    上一篇：CSS3中的@keyframes关键帧动画的选择器绑定详解CSS动画属性关键帧keyframes全解析CSS3 @keyframes简单动画实现 @keyframes规则实现多重背景的CSS动画CSS3 中的@keyframes介绍快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)

    下一篇：CSS的background属性及CSS3的背景图片设置总结CSS3 background-image颜色渐变的实现代码CSS3混合模式mix-blend-mode/background-blend-mode简介css3实现一个div设置多张背景图片及background-image属性实例演示使用CSS3来实现滚动视差效果的教程CSS3属性background-size使用指南css3中背景尺寸background-size详解详解background属性的8个属性值(面试题)

    点击排行

    迷你西游主流护法神通加点大全_手机游戏_游戏攻略_

    本栏推荐

    迷你西游主流护法神通加点大全_手机游戏_游戏攻略_
    发布内容
    -六神源码网