基本CSS选择器
选择器 | 描述 |
* | 匹配任意元素。 |
Element | 匹配所有的“Element”元素。 |
Element1 Element2 | 匹配“Element2”元素,其中“Element2”是所有“Element1”的子孙元素。 |
Element1>Element2 | 匹配“Element2”元素,其中“Element2”是所有“Element1”的直接子元素。 |
Element1+Element2 | 匹配“Element2”元素,其中“Element2”与“Element1”是一对邻近的兄弟节点(这两个元素是紧挨着的)。 |
Element1~Element2 | 匹配“Element2”元素,其中“Element2”与“Element1”是一对兄弟节点(这两个元素不必紧挨着)。 |
Element1:has(Element2) | 匹配“Element1”元素,“Element1”元素中至少有一个“Element2”元素。 |
Element.className | 匹配“Element”元素,“Element”元素的“class”属性值为“className”。 |
Element#ID 或 #ID | 匹配元素的“id”属性值为“ID”的所有元素。 |
Element[Attribute] | 匹配“Element”元素,“Element”元素具有显式定义的“Attribute”属性。 |
Element[Attribute=Value] | 匹配“Element”元素,“Element”元素具有显式定义的“Attribute”属性,并且该属性值为“Value”。 |
Element[Attribute^=Value] | 匹配“Element”元素,“Element”元素具有显式定义的“Attribute”属性,并且该属性值以“Value”开始。 |
Element[Attribute$=Value] | 匹配“Element”元素,“Element”元素具有显式定义的“Attribute”属性,并且该属性值以“Value”结尾。 |
Element[Attribute*=Value] | 匹配“Element”元素,“Element”元素具有显式定义的“Attribute”属性,并且该属性值中包含“Value”。 |
位置选择器
选择器 | 描述 |
:first | 匹配第一个元素。例如:“li a:first”,匹配“li”元素下的第一个“a”元素。 |
:last | 匹配最后一个元素。例如:“li a:last”,匹配“li”元素下的最后一个“a”元素。 |
:first-child | 匹配第一个子元素。例如:“li:first-child”,匹配“li”元素中的第一个子元素。 |
:last-child | 匹配最后一个子元素。例如:“li:last-child”,匹配“li”元素中的最后一个子元素。 |
:only-child | 匹配没有兄弟节点的所有元素。 |
:nth-child(n) | 匹配第n(n>=1)个子节点。例如:“li:nth-child(2)”匹配每个列表的第二个“li”项。注意:如果n等于0,就会导致选择所有元素的异常结果。 |
:nth-child(odd|even) | 匹配“奇数”或“偶数”的子节点。例如:“li:nth-child(even)”匹配每个序列的偶数子节点。 |
:nth-child(Xn+Y) | 匹配根据传入的公式计算的第n个子节点。如果“Y”为0,则忽略“Y”。n从0开始且“X”不等于0。例如:li:nth-child(3n),匹配3的倍数的项;li:nth-child(5n+1),匹配5的倍数的项的下一项。注意:根据Xn+Y计算得到的结果数列中,不包括0。 |
:odd 或 :even | 匹配页面范围内奇数或偶数的元素。例如:“li:even”,匹配全部偶数的“li”项。 |
:eq(n) | 匹配第n(n>=0)个元素。 |
:gt(n) | 匹配第n(n>=0)个元素后的元素,但不包括n。 |
:lt(n) | 匹配第n(n>=0)个元素前的元素,但不包括n。 |
注意:选择器“nth-child”从1开始计数,而其他选择器从0开始计数。这是为了与CSS兼容。
jQuery的自定义选择器
选择器 | 描述 |
:animated | 匹配当前处于动态控制之下的元素。 |
:button | 匹配任意按钮,包括:“input[type=submit]”、“input[type=reset]”、“input[type=button]”和“button”。 |
:checkbox | 匹配复选框元素,“input[type=checkbox]”。 |
:checked | 匹配已选中的复选框或单选按钮(为CSS所支持)。 |
:containers(foo) | 匹配只包含文本“foo”的元素。 |
:disabled | 匹配在界面上已经禁用的表单元素(为CSS所支持)。 |
:enabled | 匹配在界面上已经启用的表单元素(为CSS所支持)。 |
:file | 匹配所有文件框元素,“input[type=file]”。 |
:header | 匹配所有标题元素,“h1, h2, h3, h4, h5, h6”。 |
:hidden | 匹配所有隐藏的元素。 |
:image | 匹配表单的图像元素,“input[type=image]”。 |
:input | 匹配所有表单元素,“input, select, textarea, button”。 |
:not(filter) | 匹配元素为根据指定的筛选器进行求反。 |
:parent | 匹配包含后代节点(包括文本)的元素,而排除空元素。 |
:password | 匹配口令元素,“input[type=password]”。 |
:radio | 匹配单选按钮元素,“input[type=radio]”。 |
:reset | 匹配复位按钮元素,“input[type=reset], button[type=reset]”。 |
:selected | 匹配已选中的选项元素。 |
:submit | 匹配提交按钮元素,“input[type=submit], button[type=submit]”。 |
:text | 匹配文本字段元素,“input[type=text]”。 |
:visible | 匹配所有可见元素。 |