zoukankan      html  css  js  c++  java
  • (转)css4 选择器

    原文地址

    CSS4选择器工作草案于2011年9月29日被发布。 新增了一些内容,我们来看看是哪些:

    一.复合选择器

    1.E:not(s1, s2)
    匹配所有既不包含s1选择器也不包含s2选择器的元素。是的,这个只是将css3的E:not(s)中1个参数变成2个,谁又会说这不是发展呢。
    例如*not(input,button)表示除input以及button外的所有元素

    2.E:matches(s1, s2)
    匹配s1和s2选择器的元素

    a:matches(:link,:hover){...}/*定义a:link与a:hover时的样式*/
    label:matches(:hover, :focus) /for/ input{...}/*定义input当其label滑过和获得焦点时的样式,"//"用法下面会有介绍*/
    

    需要注意的的是只有comopund selectors才可以应用E:matches(),另外不允许嵌套,像:matches(:matches(…))和:not(:matches(…))都是不对的,对于compound selectors的定义搞的不是很清楚,理解透彻的人可以分享下。

    按常理推算参数可以大于2个,像E:not(s1,s2,s3..),E:mathches(s1,s2,s3…),草案中并没有提到这点。

    二.本地链接伪类 E:local-link

    匹配url与选择器匹配的链接。

    nav :local-link { text-decoration: underline; }

    这个规则将会使nav包含的链接中,url与当前文档一致的都有下划线。

    也可以有参数,格式是这样:E:local-link(n),注:n代表链接匹配URI的目录级数,n>0。
    css:

        a:local-link {...}
        a:local-link(0) {...}
        a:local-link(1) {...}
        a:local-link(2) {...}
        a:local-link(2) {...}

    html:

        <a href="http://www.wheattime.com">Home</a>
        <a href="http://www.wheattime.com/2011">2011</a>
        <a href="https://www.wheattime.com/2011/03">March</a>
        <a href="http://www.wheattime.com/2011/03/">March</a>
        <a href="http://wheattime.com/2011/03">March</a>

    如果当前文档的URI(统一资源标志符):http://www.wheattime.com/2011/03/,
    则:
    第一个链接将接收样式2;
    第一个链接将接收样式2,3;
    第三个链接将接收样式2,3,4;
    第四个链接将接收样式1;
    第五个链接将没有样式。

    三.时间选择器

    1.E:current

    :current(p, li, dt, dd) {background: yellow}/*时间内的元素背景将会是黄色*/

    2.E:past
    表示优先与:current前完全出现的元素,如果一个以时间排序的元素不是以文档语言来定义,那么表示:current的上一个(也许是间接的)节点

    3.E:future
    表示延迟与:current前完全出现的元素,如果一个以时间排序的元素不是以文档语言来定义,那么表示:current的下一个(也许是间接的)节点

    三.状态选择器
    E:indeterminate
    不确定值选择器,此用于元素的UI不确定状态,例如radio与checkbox可在checked和unchecked状态间切换,但却没有不确定状态。

    四.网格结构选择器

    1.E:nth-match(n of selector)
    2.E:column(selector)

    五.ID属性选择器

    E /foo/ F
    匹配的是这样的F元素,它的ID值与E元素的foo属性值相等。

    label:matches(:hover, :focus) /for/ input{...} /* 样式将作用于下面的input上 */
    <label for="maishi">麦时<input type="input" id="maishi" /></label>

    六.指定元素选择器

    $E > F
    匹配包含F子元素的父元素。

    $ul>li{color:#000;}/*样式作用在ul上*/

    参考资料:
    Selectors Level 4-W3C Working Draft 29 September 2011

    机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
  • 相关阅读:
    java基础知识
    谈谈休眠/睡眠/关机和laptop硬件寿命
    常用的git指令查询
    java swing scroll can not work
    不必要的windows服务
    工作分配问题
    回溯算法
    第四章上机实践
    算法第四章作业
    第三章上机实践
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2933984.html
Copyright © 2011-2022 走看看