| symbol | describe | example | illustrate |
|---|---|---|---|
| followed by unsigned | Equivalent to "and" relationship | input.k-textbox{
... } |
Select the input and contain the elements of the k-textbox class |
| , (comma) | selector separator, select multiple elements | h1, h2{
... } |
Select all elements of h1 and h2 |
| . (dot) | class selector | .k-textbox{
... } |
Select elements that contain the k-textbox class |
| *(Asterisk) | all elements | *{
... } |
select all elements |
| # (hashtag) | ID selector | #mem-id { ... }
|
Select the element whose ID is mem-id |
| [ ] (brackets) | attribute selector | h1[class='k-textbox']{
... } |
selects h1 and contains elements of class k-textbox |
| (space) | descendant selector | #container h1{
... } |
Select all h1 descendant elements in container with ID |
| > (greater than sign) | child element selector | #container>h1{
... } |
Select all sub-elements whose ID is h1 in the container (only sub-elements, grandchildren are not counted) |
| + (plus sign) | immediately following sibling selector | #mem-id+h1{ ... }
|
Select the h1 element "immediately" behind the ID mem-id |
| ~ (tilde) | sibling element selector | #mem-id~h1{ ... }
|
Select all h1 sibling elements with ID mem-id |
| : or:: | pseudo class |
Several symbols in the selector
1,(comma)
2 (space)
3.(period)
4>(greater than sign)
5+(plus sign)
6~(tilde sign)
- comma
When the selectors are separated by commas, they are in an "or" relationship when matching queries
- space
In the result matched by the selector before the space, use the selector after the space to do the global matching of the result
- full stop
The match is class(class='style')
- greater than sign
Use the selector behind the greater than sign to match the previous results in the same dimension in the sub-content
- plus
The matching result uses the selector behind the plus sign to perform a global match on the content of the same level as the previous result
- good waves
The matching result uses the selector behind the plus sign to match the content of the same level of the previous result at the same level. The
special note
1 space and the greater than sign
"space" and "greater than" both match the subcontent of the previous matching result. The difference is that "space" matches sub-content and grand-child content, while "greater than" only matches sub-content
2 Plus sign and tilde sign
"plus sign" and "wave good" both match the content at the same level of the previous matching results. The difference is the same as above, the "plus sign" is the descendant content, and the "tilde" is just the sub content.
This is just part of the jquery selector.
After reading it, I think the jquery selector is very good and powerful.