The following table summarizes CSS2 selector syntax, you can see in detailhttp:///TR/REC-CSS2/:
Pattern | Meaning | Described in section |
---|---|---|
* | Matches any element. | Universal selector |
E | Matches any E element (., an element of type E). | Type selectors |
E F | Matches any F element that is a descendant of an E element. | Descendant selectors |
E > F | Matches any F element that is a child of an element E. | Child selectors |
E:first-child | Matches element E when E is the first child of its parent. | The :first-child pseudo-class |
E:link E:visited | Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). | The link pseudo-classes |
E:active E:hover E:focus | Matches E during certain user actions. | The dynamic pseudo-classes |
E:lang(c) | Matches element of type E if it is in (human) language c (the document language specifies how language is determined). | The :lang() pseudo-class |
E + F | Matches any F element immediately preceded by an element E. | Adjacent selectors |
E[foo] | Matches any E element with the “foo” attribute set (whatever the value). | Attribute selectors |
E[foo=”warning”] | Matches any E element whose “foo” attribute value is exactly equal to “warning”. | Attribute selectors |
E[foo~=”warning”] | Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”. | Attribute selectors |
E[lang|=”en”] | Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. | Attribute selectors |
HTML only. The same as DIV[class~=”warning”]. | Class selectors | |
E#myid | Matches any E element ID equal to “myid”. | ID selectors |
Selector contains Selector objects and classes.
The Selector object has the following two methods:
match(element):Whether the element matches this selector has been introduced in Element
findElements(parentNode):List of all descendants elements in parentNode that matches this selector
The usage method is also very simple var s=new Selector(expression); (element); ($(element)), whereThe expression can be as follows: "div", "#id", ".class", "div#id", "div[attribute]", "div[attribute=ffff]", "div[attribute!=sdf]"
Among them, Selector also has several static methods, which are:
matchElements(elements, expression):Returns a list of elements in elements that conform to expression $$ method:Just a simple callreturn (document, $A(arguments))
findElement(elements, expression, index):Returns the element indexed as index in the list of elements that conform to expression in elements
findChildElements(element, expressions):Find out the list of elements that conform to expressions in the descendants of elements of element, where expressions is an expression array, where expressions support the form "div li.#id"