学习前端大名鼎鼎的JQuery，入门肯定都是学习JQuery的选择器，大多数教程都会说JQuery能使用CSS的选择器语法来获取网页元素，但是其中还是有些许的区别。这里罗列了JQuery和CSS的选择器供大家查阅。
这里是CSS和JQuery的属性区别的简明罗列，后文会给出他们相同属性，特有属性的属性说明供同学们查阅。
共有的选择器
#id
.class
element [attribute]
element element [attribute*=value]
element,element [attribute|=value]
element+element [attribute~=value]
element>element [attribute$=value]
element1~element2 [attribute^=value]
:first-child :nth-child()
:first-of-type :nth-last-child()
:last-child :nth-last-of-type()
:last-of-type :nth-of-type()
:only-child
:only-of-type
:checked :disabled :empty :enabled :focus :not()
CSS & JQuery
CSS Only JQuery Only
::placeholder [attribute!=value]
::selection :text:button
:active :checkbox
:after :file
:before :image
:first-letter :input
:first-line :password
:hover :radio
:lang :reset
:link :selected
:visited :submit
:default :hidden
:valid :visible
:invalid :animated
:in-range :eq
:out-of-range :even
:require :first
:optional :gt
:header
:last
:lt
:odd
:contains()
:has()
:parent
选择器说明
| 选择器(JQ & CSS) |
说明 |
| #id |
ID选择器 |
| .class |
类选择器 |
| element element |
后代选择器,用于选择元素内部的元素 |
| element,element |
多选择器组合 |
| element+element |
兄弟选择器，用于选择(不是内部)指定的第一个元素之后紧跟的元素 |
| element>element |
子代选择器，选择直接子元素而不包括子元素的后代 |
| element1~element2 |
选择排在自己之后的所有符合条件的兄弟元素 |
| [attribute] |
用于选取带有指定属性的元素 |
| [attribute*=value] |
选取每个带有指定属性且值包含指定字符串的元素 |
| [attributeI=value] |
选取每个带有指定属性的元素,该元素的值等于指定字符串(比如 "en")或以该字符串后跟连接符作为开头的字符串(比如 "en-us") |
| [attribute$=value] |
匹配属性值以指定值结尾的每个元素 |
| [attribute^=value] |
选择器选取每个带有指定属性且以指定字符串开头的元素。 |
| [attribute~=value] |
用于选取属性值中包含指定词汇的元素例如选择test ——“title test”可以而“titletest”不行 |
| :first-child |
用于选取属于其父元素的首个子元素的指定选择器 |
| :first-of-type() |
匹配元素是其父元素的第一个同类型子元素 |
| :last-child |
匹配属于其父元素的最后一个子元素的每个元素 |
| :last-of-type() |
匹配元素是其父元素的最后一个同类型子元素 |
| :nth-child() |
匹配属于其父元素的第 N 个子元素,不论元素的类型 |
| :nth-last-child() |
匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数 |
| :nth-last-of-type() |
选择所有他们父级兄弟元素下具有相同的元素名 |
| :nth-of-type |
匹配属于父元素的特定类型的第 N 个子元素的每个元素 |
| :only-child |
匹配属于其父元素的唯一子元素的每个元素 |
| :only-of-type |
匹配属于其父元素的特定类型的唯一子元素 |
| :checked |
匹配每个已被选中的 input 元素(只用于单选按钮和复选框) |
| :disabled |
规定应该禁用 input 元素 |
| :empty |
匹配没有子元素（包括文本节点）的每个元素 |
| :enabled |
匹配每个启用的的元素(主要用于表单元素) |
| :focus |
用于选取获得焦点的元素 |
| :not() |
非匹配指定元素/选择器的每个元素 |
CSS特有
| 选择器 |
说明 |
| :active |
用于选择活动链接 |
| :after |
在被选元素的内容后面插入内容 |
| :before |
在被选元素的内容前面插入内容 |
| :first-letter |
用于选取指定选择器的首字母 |
| :first-line |
用于选取指定选择器的首行 |
| :hover |
用于标指针浮动在上面的选择鼠元素 |
| :lang |
用于选取带有以指定值开头的 lang 属性的元素 |
| :link |
用于选取未被访问的链接 |
| :visited |
用于选取已被访问的链接 |
| :default |
:default伪类选择器只能作用在表单元素上，表示默认状态的表单元素。 |
| :valid |
用于匹配输入值为合法的元素 |
| :invalid |
用于匹配输入值为非法的元素 |
| :in-range |
匹配值在指定区间之内的input元素 |
| :out-of-range |
匹配值在指定区间之外的input元素 |
| :require |
用于匹配设置了 "required" 属性的元素 |
| :read-only |
用于匹配设置 "readonly"（只读） 属性的元素 |
| :read-write |
用于匹配可读及可写的元素 |
| :optional |
用于匹配可选的输入元素 |
| ::placeholder |
用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。 |
| ::selection |
匹配被用户选取的选取是部分。只可以应用于少数的CSS属性：color, background, cursor,和outline。 |
JQuery 特有
| 选择器 |
说明 |
| [attribute!=value] |
选取每个不带有指定属性和值的元素。 |
| :text |
选择器选取类型为 text 的 <input> 元素。 |
| :button |
选择器选取类型为 button 的 <button> 元素和 <input> 元素。 |
| :checkbox |
选择器选取类型为 checkbox 的 <input> 元素。 |
| :file |
选择器选取带有 type=file 的 input 元素。 |
| :image |
选择器选取类型为 image 的 <input> 元素。 |
| :input |
选择器选取表单元素。 |
| :password |
选择器选取类型为 password 的 <input> 元素。 |
| :radio |
选择器选取类型为 radio 的 <input> 元素。 |
| :reset |
选择器选取类型为 reset 的 <button> 和 <input> 元素。 |
| :selected |
选择器选取被选择的 <option> 元素。 |
| :submit |
选择器选取类型为 submit 的 <button> 和 <input> 元素。 |
| :hidden |
选择器选取隐藏的元素。 |
| :visible |
选择器选取当前可见的每个元素。 |
| :animated |
选择器选取当前的所有动画元素。 |
| :eq() |
选择器选取带有指定 index 值的元素。 |
| :even |
选择器选取带有偶数索引号的每个元素（比如：0、2、4 等等）。 |
| :first |
选择器选取第一个元素。 |
| :gt() |
选择器选取 index 值大于指定数字的元素。 |
| :header |
选择器选取所有标题元素 (<h1> - <h6>)。 |
| :last |
选择器选取最后一个元素。 |
| :lt() |
选择器选取 index 值小于指定数字的元素。 |
| :odd |
选择器选取带有奇数索引号的每个元素（比如：1、3、5 等等）。 |
| :contains() |
选择器选取包含指定字符串的元素。 |
| :has() |
选择器选取所有包含一个或多个元素在其内的元素，匹配指定的选择器。 |
| :parent |
选择器选取所有是其他元素的父元素且包含文本节点的元素。 |
