基础选择器
选择器 | 名称 | 描述 | 返回 | 示例 |
---|---|---|---|---|
#id | id选择器 | 根据给定的id匹配一个元素 | 单个元素 | $("#box");选取id为box元素 |
.class | 类选择器 | 根据给定的类名匹配元素 | 集合元素 | $(".box");选取所有类名为box元素 |
element | 元素选择器 | 根据给定的元素名称匹配元素 | 集合元素 | $(“p”);选取所有 元素 |
* | 通配符选择器 | 匹配所有元素 | 集合元素 | $("*");选取所有元素 |
selector1,selector2,selectorN | 并集选择器 | 将所有选择器匹配到的元素合并后一起返回 | 集合元素 | $(“div,p,.box”);选取所有
元素,所有
元素和所有类名为box元素 |
层次选择器
选择器 | 名称 | 描述 | 返回 | 示例 |
---|---|---|---|---|
$(“ancestor descendant”) | 后代选择器 | 选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等) | 集合元素 | $(“div span”);选取
元素里所有的
元素
|
$(“parent > child”) | 子元素选择器 | 找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等) | 集合元素 | $(“div>span”);选取
元素下元素名称是
的子元素
|
$(“prev + next”) | 相邻兄弟选择器 | 选取prev元素后面紧跟的那个next元素 | 集合元素 | $(".one+div");选取类名为one的下一个同级的
元素
|
$(“prev ~ siblings”) | 通用兄弟选择器 | 选取prev元素后面的所有next元素 | 集合元素 | $("#two~div");选取id名为two元素后面所有同级的
元素
|
序选择器
如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背
属性选择器
如上内容不再一一赘述,观看第十章-CSS选择器,使用时查询文档即可
做开发是脑力活,我们需要掌握的是解决问题的方法,而不是死记硬背
内容过滤选择器
选择器 | 描述 | 返回 |
---|---|---|
:empty | 选取不包含子元素或文本为空的元素 | 集合元素 |
:parent | 选取含有子元素或文本的元素 | 集合元素 |
:contains(text) | 选取含有文本内容为text的元素 | 集合元素 |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |