jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)

 

jQuery、CSS常用选择器

符号	描述	示例	说明
紧接无符号	相当于”并且“关系	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很好很強大