zoukankan      html  css  js  c++  java
  • CSS3选择器

    CSS3选择器原说明文档:http://www.w3.org/TR/css3-selectors/
    翻 译如下,仅供参考:

    *下面格式没有绘制表格,使用百度文章编辑器的三格布局,请谅解
    形式
    -----------------------
    *
    E
    E[foo]
    E[foo="bar"]
    E[foo~="bar"]
    E[foo^="bar"]
    E[foo$="bar"]
    E[foo*="bar"]
    E[foo|="en"]
    E:root
    E:nth-child(n)
    E:nth-last-child(n)
    E:nth-of-type(n)
    E:nth-last-of-type(n)
    E:first-child
    E:last-child
    E:first-of-type
    E:last-of-type
    E:only-child
    E:only-of-type
    E:empty
    E:link
    E:vidited
    E:active
    E:hover
    E:focus
    E:target
    E:lang(fr)
    E:enabled
    E:disabled
    E:checked
    E::first-line
    E::first-letter
    E::before
    E::after
    E.warning
    E#myid
    E:not(s)
    E F
    E > F
    E + F
    E ~ F
     
    含义
    -------------------------------------
    任 何元素
    类型为E的元素
    匹配具有foo属性的元素E
    匹配foo属性值为bar的元素E
    匹配 foo属性值是空格分隔的多值情况时,有一个值为bar的元素E
    匹配foo属性值以bar开头的元素E
    匹配foo属性值以bar结尾的元 素E
    匹配foo属性值中包含字符串bar的元素E
    匹配foo属性值包括带有连字符“-”的情况,以en开头的元素E
    文档的根元素 E
    父元素中的第n个子元素E
    父元素中的倒数第n个子元素E
    此类型中第n个同级兄弟元素E
    此类型中倒数第n个 同级兄弟元素E
    父元素中首个子元素E
    父元素中最后一个子元素E
    此类型中首个同级兄弟元素E
    此类型中最后一 个同级兄弟元素E
    父元素的子元素E
    此类型的同级兄弟元素E
    匹配没有任何子元素(包括文本节点)的元素E
    匹配具有超链接源 锚点的元素E 没有被访问(:link)
    或者已经访问(:visited)
    匹配元素E具有的某 些用户操作


    匹配具有目标URI引用的元素E
    匹配具有特定语言fr的元素E(文档语言指定了文档采用什么语言)
    匹 配启用或者禁用状态的元素E

    匹配处于被选中状态的元素E(比如,一个单选按钮或复选框)
    匹配元素E的首行格式化
    匹 配元素E的首字符格式化
    匹配元素E的前面生成的内容
    匹配元素E的后面生成的内容
    匹配class属性是warning的元素E(文 档语言指定了class怎样被确定)
    匹配id属性为myid的元素E
    不匹配简单选择器s的元素E
    匹配元素F是元素E的后代
    匹 配元素F是元素E的子元素
    匹配元素F的前面是元素E
    匹配元素F的前面有元素E
     
    说明(CSS版本)
    ----------------------------------
    通用选择器(2)
    类型选择器(1)
    属性选择器(2)
    属 性选择器(2)
    属性选择器(2)
    属性选择器(3
    属 性选择器(3
    属性选择器(3
    属性选择器(2)
    结构性伪类3
    结 构性伪类(3
    结构性伪类(3
    结构性 伪类(3
    结构性伪类(3
    结 构性伪类(2)
    结构性伪类(3
    结 构性伪类(3
    结构 性伪类(3
    结 构性伪类(3
    结 构性伪类(3
    结 构性伪类(3
    链接伪类(1)

    用户操作伪类(1 和2)


    目标伪类3
    :lang()伪类(2)
    用户界面元素状态伪类3

    用 户界面元素状态伪类(3
    ::first-line伪类(1)
    ::first-letter伪 类(1)
    ::before伪类(2)
    ::after伪类(2)
    Class选择器(1)
    ID选择器(1)
    否定伪类3
    后代组合(1)
    子组合(2)
    相 邻兄弟组合(2)
    同 级兄弟组合3

    附一个CSS3选择器链接:http://www.web600.net/tool/css3_0/attribute_selectors.shtml

    This section is non-normative, as it merely summarizes the following sections.

    A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.

    Selectors may range from simple element names to rich contextual representations.

    The following table summarizes the Selector syntax:

    PatternMeaningDescribed in sectionFirst defined in CSS level
    * any element Universal selector 2
    E an element of type E Type selector 1
    E[foo] an E element with a "foo" attribute Attribute selectors 2
    E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2
    E[foo~="bar"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar" Attribute selectors 2
    E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3
    E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3
    E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" Attribute selectors 3
    E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2
    E:root an E element, root of the document Structural pseudo-classes 3
    E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3
    E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3
    E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3
    E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3
    E:first-child an E element, first child of its parent Structural pseudo-classes 2
    E:last-child an E element, last child of its parent Structural pseudo-classes 3
    E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3
    E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3
    E:only-child an E element, only child of its parent Structural pseudo-classes 3
    E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3
    E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3
    E:link
    E:visited
    an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1
    E:active
    E:hover
    E:focus
    an E element during certain user actions The user action pseudo-classes 1 and 2
    E:target an E element being the target of the referring URI The target pseudo-class 3
    E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) The :lang() pseudo-class 2
    E:enabled
    E:disabled
    a user interface element E which is enabled or disabled The UI element states pseudo-classes 3
    E:checked a user interface element E which is checked (for instance a radio-button or checkbox) The UI element states pseudo-classes 3
    E::first-line the first formatted line of an E element The ::first-line pseudo-element 1
    E::first-letter the first formatted letter of an E element The ::first-letter pseudo-element 1
    E::selection the portion of an E element that is currently selected/highlighted by the user The UI element fragments pseudo-elements 3
    E::before generated content before an E element The ::before pseudo-element 2
    E::after generated content after an E element The ::after pseudo-element 2
    E.warning an E element whose class is "warning" (the document language specifies how class is determined). Class selectors 1
    E#myid an E element with ID equal to "myid". ID selectors 1
    E:not(s) an E element that does not match simple selector s Negation pseudo-class 3
    E F an F element descendant of an E element Descendant combinator 1
    E > F an F element child of an E element Child combinator 2
    E + F an F element immediately preceded by an E element Adjacent sibling combinator 2
    E ~ F an F element preceded by an E element General sibling combinator 3

    The meaning of each selector is derived from the table above by prepending "matches" to the contents of each cell in the "Meaning" column.

  • 相关阅读:
    异常
    动态链接库与静态链接库的区别
    OpenBLAS 安装与使用
    Eigen 优化技巧
    C++读取保存为二进制的 numpy 数组
    Sublime Text Windows版使用Conda环境
    Repeater 时间格式化
    C#与js的各种交互
    js 实现精确加减乘除
    常用正则表达式
  • 原文地址:https://www.cnblogs.com/w3live/p/1916242.html
Copyright © 2011-2022 走看看