• CSS选择器


    原地址:

    http://www.w3.org/TR/css3-selectors/

    测试演示地址:

    http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/reports/implementreportTEMPLATE.html

    Abstract

    Selector是在树状结构中进行匹配的模式,类似于XML文档中读取节点的技术。Selector对HTML和XML的处理得到了优后,被设计为使用效率关键的代码。

    CSS是一种渲染HTML和XML的一种语言。

    6 Simple selector

    6.1 Type selector

    6.1.1 Type selectors and namespaces

    Type selector允许可选命名空间组件:事先声名的命名前缀,通过竖线分隔的元素名称的预先设定。

    一个命名元素可能左边是空的(命名元素的前边没有前缀),表明这个Selector只代表元素而没有namespace.

    ns|E          ns的namespace中的E元素

    *|E            E元素,任何namespace,包括没有namespace

    |E              没有namespace的E元素

    E                若没有默认namespace,同 *|E,否则同 ns|E

    6.2 Universal selector

    6.3 Attribute selectors

    [attr] 代表某元素包括该属性,无论该属性有什么值

             h1[title] 有title属性的h1标签

    [attr=val]某元素的属性attr的值val

             span[class=”example”], class属性为 example的span

    [attr~=val] 代表某元素为空白符分隔的某一个值

             a[rel~="copyright"] { ... }, 可以匹配 rel=”copyright copyleft”的a元素

    [attr|=val] 代表某元素attr属性的值为val 或以 val开始后接-( val-)

             a[hreflang!=”en”] 可匹配属性 en, en-US…

    [attr^=val] 代表某元素attr属性的值以val开头

    [attr$=val] 代表某元素attr属性以val结尾

             a[href$=”.html”] href属性以.html结尾的a标签

    [attr*=val] 代表某元素attr属性的值所括 val

    6.4 Class selectors

    使用点来表示 Css中的Class

    *.pastoral 或 .pastoral 查找 元素包括 class=”pastoral”

    6.5 ID selectors

    #chapter1 查询 ID为 chapter1的元素  id=”chapter1”

    6.6 Pseudo-classes

    :link 应用未访问过的链接

    :visited应用已访问过的链接

    :hover user hovers

    :active 元素已被用户激活过(active links)

    :focus

    :target URI中的 #  锚点

    :enabled

    :disabled

    :checked 单选或多选框 选中状态

    :root

    :nth-child()        an+b  a,b为整数

             tr:nth-child(2n+1) table的奇数行

             tr:nth-child(odd)       同上

             tr:nth-child(2n+0)    table的偶数行

             tr:nth-child(even)     同上

            

             :nth-child(10n-1)      表示行9、19、29…

             :nth-child(10n+9)     同上

             :nth-child(10n+-1)    语法错误,忽略

            

             foo:nth-child(0n+5)           第5个foo

             foo:nth-child(5)                  同上

    :nth-last-child()         an+b

             tr:nth-last-child(-n+2)        表格的最后两行

             tr:nth-last-child(odd)          表格的奇数行,从后向开

    :nth-of-type()            an+b

    :nth-last-of-type()

             body>h2:nth-of-type(n+2):nth-last-of-type(n+2)     body中的h2,除去第一个和最后一个

             body>h2:not(:first-of-type):not(:last-of-type) 同上

    :first-child

             div>p:first-child        div元素中的第一个元素并且是p元素

    last-child

             ol>li:last-child  ol中的最后一个li

    :first-of-type

    :last-of-type

    :only-child 该元素的父元素只有一个子元素

    :only-of-type   

    :empty

    :not

             button:not([DISABLED])

    7 Pseudo-elements

    ::first-line

             p::first-line p元素下的第一行

    ::first-letter

    ::before

    ::after

    8 Combinators

    8.1 Descendant combinator

    A B   A标签下的B标签

             h1 em h1标签下的em标签

             div * p

             div p *[href]

    8.2 Child combinators

    A>B  child combinators

             body>p

             div ol>li p p标签需要li的子孙,li需为ol的孩子, ol需为div的子孙

    8.3 Sibling combinators

    A+B A临近的兄弟标签B

             math + p math标签后的p标签

    A ~ B

             h1 ~ pre h1标签同一父标签下的pre标签

    9 Calculating a selector’s specificity

    10 The grammar of Selectors

    10.1 Grammar

    *       0或多

    +      1或多

    ?       0或1

    |       separates alternatives

    []       grouping

    10.2 Lexical scanner

    "~="             return INCLUDES;

    "|="             return DASHMATCH;

    "^="             return PREFIXMATCH;

    "$="             return SUFFIXMATCH;

    "*="             return SUBSTRINGMATCH;

    {ident}          return IDENT;

    {string}         return STRING;

    {ident}"("       return FUNCTION;

    {num}            return NUMBER;

    "#"{name}        return HASH;

    {w}"+"           return PLUS;

    {w}">"           return GREATER;

    {w}","           return COMMA;

    {w}"~"           return TILDE;

    ":"{N}{O}{T}"("  return NOT;

    @{ident}         return ATKEYWORD;

    {invalid}        return INVALID;

    {num}%           return PERCENTAGE;

    {num}{ident}     return DIMENSION;

    "<!--"           return CDO;

    "-->"            return CDC;

    11 Profiles

  • 相关阅读:
    Android模拟器安装程序及上传音乐并播放
    Android .classpath文件的作用
    eclipse常用快捷键
    使用Eclipse开发Android源码
    android模拟器环境选择媒体文件,解决"No media found"
    Android模拟器使用SD卡
    string.xml文件需要转译字符”’”
    播放器设计方案
    PHP文件系统文件上传
    PHP文件系统文件下载
  • 原文地址:https://www.cnblogs.com/zyzl/p/4782724.html
Copyright © 2020-2023  润新知