jquery、css 的選擇器(逗號/空格/英文句號/大於號/加號/波浪號)備忘
阿新 • • 發佈：2018-12-25
| 符號 | 描述 | 示例 | 說明 |
|---|---|---|---|
| 緊接無符號 | 相當於”並且“關係 | input.k-textbox{ ... } |
選出input並且包含k-textbox類的元素 |
| , （逗號） | 選擇器分格符, 選擇多種元素 | h1, h2{ ... } |
選出h1 和 h2 的所有元素 |
| . （圓點） | 類選擇器 | .k-textbox{ ... } |
選出包含k-textbox類的元素 |
| *（星號） | 所有元素 | *{ ... } |
選擇所有的元素 |
| # (井號） | ID選擇器 | #mem-id{ ... } |
選擇 ID 為 mem-id 的元素 |
| [ ] (中括號) | 屬性選擇器 | h1[class='k-textbox']{ ... } |
選擇h1並且包含k-textbox類的元素 |
| （空格） | 後代選擇器 | #container h1{ ... } |
選擇 ID 為 container 內的所有為h1後代元素 |
| > （大於號） | 子元素選擇器 | #container>h1{ ... } |
選擇 ID 為 container 內的所有為h1的子元素(僅限子元素，孫的不計） |
| + （加號） | 後面緊挨的兄弟選擇器 | #mem-id+h1{ ... } |
選擇 ID 為 mem-id 的後面 "緊挨" 的h1元素 |
| ~ （波浪線） | 兄弟元素選擇器 | #mem-id~h1{ ... } |
選擇ID 為 mem-id 的所有h1兄弟元素 |
| : 或 :: | 偽類 |
在選擇器裡面幾種符號
1,(逗號)
2 (空格)
3.(英文句號)
4>(大於號)
5+(加號)
6~(波浪號)
- 逗號
各選擇器之間用逗號分開 匹配查詢的時候 之間是 “或”的關系
- 空格
在用空格前的selector匹配的結果裡面 用空格後面的selector 做結果的全域性匹配
- 英文句號
匹配的是class(class='style')
- 大於號
用大於號後面的selector對前面的結果在子內容 做同維度匹配
- 加號
匹配結果 用加號後面的 selector 對前面的結果同一級的內容做全域性匹配
- 波浪好
匹配結果 用加號後面的 selector 對前面的結果同一級的內容做同級匹配
特別說明的
1 空格與大於號
“空格”和“大於號”都是對前面的匹配結果的子內容做匹配。不同的是“空格”做的是子內容和孫內容匹配，而“大於號”只對子內容做匹配
2 加號與波浪號
“加號”和“波浪好” 都是對前面匹配結果的同一級內容做匹配。不同的跟上面的差別一樣，“加號”是子孫內容，而“波浪號”只是子內容
這只是部分jquery的selector
後面看完後覺得jquery的selector很好很強大
說的太繞口了。以免誤人子弟，請自查閱文件。