• 技术文章 >web前端 >前端问答

    css3新增选择器有哪些

    青灯夜游青灯夜游2021-04-08 19:10:06原创150

    css3选择器有:“[att^="val"]”、“[att$="val"]”、“[att*="val"]”、“:root”、“:nth-child(n)”、“:last-child”、“:only-child”、“:empty”等等。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3新增的选择器

    属性选择器(除IE6外的大部分浏览器支持)

    E[att^="val"] 属性att的值以"val"开头的元素

    E[att$="val"] 属性att的值以"val"结尾的元素

    E[att*="val"] 属性att的值包含"val"字符串的元素

    实例:p[id^="nav"] {background:#000;}

    结构伪类选择器(过滤选择器)

    (注:FireFox 1.5/2.0/3.0 支持E:root,FireFox 3.0支持E:last-child、E:empty,由于IE6/7/8不支持,所以选择合适的场景用吧

    序号选择器含义实例
    1E:root匹配文档的根元素,对于HTML文档,就是HTML元素
    2E:nth-child(n)匹配其父元素的第n个子元素,第一个编号为1p:nth-child(3) { color:#f00; }
    3E:nth-last-child(n)匹配其父元素的倒数第n个子元素,第一个编号为1p:last-child { background:#ff0; }
    4E:nth-of-type(n)与:nth-child()作用类似,但是仅匹配使用同种标签的元素p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
    5E:nth-last-of-type(n)与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
    6E:last-child匹配父元素的最后一个子元素,等同于:nth-last-child(1)
    7E:first-of-type匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
    8E:last-of-type匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
    9E:only-child匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)p:only-child { background:#ff0; }
    10E:only-of-type匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    11E:empty匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素p:empty { background:#ff0; }

    UI状态伪类选择器(IE6/7/8不支持)

    序号选择器含义实例
    1E:enabled匹配表单中激活的元素
    2E:disabled匹配表单中禁用的元素input[type="text"]:disabled { background:#ddd; }
    3E:checked匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
    4E::selection匹配用户当前选中的元素

    级元素通用选择器

    序号选择器含义实例
    1E ~ F匹配任何在E元素之后的同级F元素p ~ ul { background:#ff0; }

    反选伪类

    序号选择器含义实例
    1E:not(s)匹配不符合当前选择器的任何元素:not(p) { border:1px solid #ccc; }

    :target伪类

    序号选择器含义实例
    1E:target匹配文档中特定"id"点击后的效果

    (学习视频分享:css视频教程

    以上就是css3新增选择器有哪些的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css3 选择器
    上一篇:css样式有哪几种类型 下一篇:div css怎么实现显示隐藏
    第15期线上培训班

    相关文章推荐

    • css3怎么设置元素背面不可见• 使用CSS3实现简单时间轴效果(附代码)• css3中怎么调节透明度• css3中实现动画有哪两种方式• CSS3如何实现流星雨效果?(代码示例)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网