• (转)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

    机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
  • 相关阅读:
    不用google 是不行的
    一些主题
    腾讯cdc空间
    断言assert的使用
    malloc()和free()的相关知识
    linux上面的sz,rz命令与ssh的配合
    寻找第k小的元素
    c语言中字符串处理函数
    详解之#ifdef和#ifndef
    搭建测试环境linux静态链接库与动态链接库的区别及动态库的创建
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2933984.html
Copyright © 2020-2023  润新知