页面元素选择器

阅读更多

var simple = '.foo'; // Only asking for the class name on the element
var simple = 'div.bar'; // Only asking for the tag/class name on the element
除了下面的Element/Attribute/Pseudo/CSS value选择器外,上面的基本选择器也值得注意,其中div.bar是由两个选择器合成,一是tag选择器div,另一个是class选择器".bar",只需注意".bar"是class选择器, bar不是一个选择器.


Element Selectors:
* any element
E an element with the tag E
E F All descendent elements of E that have the tag F
E > F or E/F all direct children elements of E that have the tag F
E + F all elements with the tag F that are immediately preceded by an element with the tag E
E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

Attribute Selectors:
The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

E[foo] has an attribute "foo"
E[foo=bar] has an attribute "foo" that equals "bar"
E[foo^=bar] has an attribute "foo" that starts with "bar"
E[foo$=bar] has an attribute "foo" that ends with "bar"
E[foo*=bar] has an attribute "foo" that contains the substring "bar"
E[foo%=2] has an attribute "foo" that is evenly divisible by 2
E[foo!=bar] attribute "foo" does not equal "bar"

Pseudo Classes:
E:first-child E is the first child of its parent
E:last-child E is the last child of its parent
E:nth-child(_n_) E is the _n_th child of its parent (1 based as per the spec)
E:nth-child(odd) E is an odd child of its parent
E:nth-child(even) E is an even child of its parent
E:only-child E is the only child of its parent
E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
E:first the first E in the resultset
E:last the last E in the resultset
E:nth(_n_) the _n_th E in the resultset (1 based)
E:odd shortcut for :nth-child(odd)
E:even shortcut for :nth-child(even)
E:contains(foo) E's innerHTML contains the substring "foo"
E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
E:not(S) an E element that does not match simple selector S
E:has(S) an E element that has a descendent that matches simple selector S
E:next(S) an E element whose next sibling matches simple selector S
E:prev(S) an E element whose previous sibling matches simple selector S
E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3
E:visible(true) an E element which is deeply visible according to Ext.dom.Element.isVisible

CSS Value Selectors:
E{display=none} css value "display" that equals "none"
E{display^=none} css value "display" that starts with "none"
E{display$=none} css value "display" that ends with "none"
E{display*=none} css value "display" that contains the substring "none"
E{display%=2} css value "display" that is evenly divisible by 2
E{display!=none} css value "display" that does not equal "none"