因为一些原因，最近在复习CSS相关的知识，果然，选择器部分直接是一点印象都没了，并且google找了一会也没看到很全的总结，好不容易找到一个，存档以便日后翻阅
虽然我并不喜欢CSS然而还是要了解一些东西的…
其中的大部分选择器也是可以直接在JQ中用的，我个人认为…
CSS选择器部分
基本选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配任何元素 |
| E | 标签选择器，匹配所有使用E标签的元素 |
| .info | class选择器，匹配所有class属性中包含info的元素 |
| #footer | id选择器，匹配所有id属性等于footer的元素 |
多元素的组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 |
| E F | 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 |
| E > F | 子元素选择器，匹配所有E元素的子元素F |
| E + F | 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F |
| E.classname | 交叉选择器，之间没有空格，选择E标签下的类名为classname的元素，类似的有E#idName |
CSS 2.1 属性选择器
由于MD语法的原因|使用¦代替
| 选择器 | 含义 |
|---|---|
| E[att] | 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如”[cheacked]”。以下同。） |
| E[att=val] | 匹配所有att属性等于”val”的E元素 |
| E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E元素 |
| E[att¦=val] | 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以”val”开头的E元素，主要用于lang属性，比如”en”、”en-us”、”en-gb”等等 |
CSS 2.1中的伪类
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配父元素的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
CSS 2.1中的伪元素
| 选择器 | 含义 |
|---|---|
| E:first-line | 匹配E元素的第一行 |
| E:first-letter | 匹配E元素的第一个字母 |
| E:before | 在E元素之前插入生成的内容 |
| E:after | 在E元素之后插入生成的内容 |
CSS 3的同级元素通用选择器
| 选择器 | 含义 |
|---|---|
| E ~ F | 匹配任何在E元素之后的同级F元素 |
CSS 3 属性选择器
| 选择器 | 含义 |
|---|---|
| E[att^=”val”] | 属性att的值以”val”开头的元素 |
| E[att$=”val”] | 属性att的值以”val”结尾的元素 |
| E[att*=”val”] | 属性att的值包含”val”字符串的元素 |
CSS 3中与用户界面有关的伪类
| 选择器 | 含义 |
|---|---|
| E:enabled | 匹配表单中激活的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 |
| E::selection | 匹配用户当前选中的元素 |
CSS 3中的结构性伪类
| 选择器 | 含义 |
|---|---|
| E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 |
CSS 3的反选伪类
| 选择器 | 含义 |
|---|---|
| E:not(s) | 匹配不符合当前选择器的任何元素 |
CSS 3中的 :target 伪类
| 选择器 | 含义 |
|---|---|
| E:target | 匹配文档中特定”id”点击后的效果 |
jQ选择器部分
偷个懒，直接从W3C复制过来的，但貌似也并不全，更详细的可以去下载API
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $(“*”) | 所有元素 |
| #id | $(“#lastname”) | id=”lastname” 的元素 |
| .class | $(“.intro”) | 所有 class=”intro” 的元素 |
| element | $(“p”) | 所有 <p> 元素 |
| .class.class | $(“.intro.demo”) | 所有 class=”intro” 且 class=”demo” 的元素 |
| :first | $(“p:first”) | 第一个 <p> 元素 |
| :last | $(“p:last”) | 最后一个 <p> 元素 |
| :even | $(“tr:even”) | 所有偶数 <tr> 元素 |
| :odd | $(“tr:odd”) | 所有奇数 <tr> 元素 |
| :eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
| :lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
| :header | $(“:header”) | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(“:contains(‘W3School’)”) | 包含指定字符串的所有元素 |
| :empty | $(“:empty”) | 无子（元素）节点的所有元素 |
| :hidden | $(“p:hidden”) | 所有隐藏的 <p> 元素 |
| :visible | $(“table:visible”) | 所有可见的表格 |
| s1,s2,s3 | $(“th,td,.intro”) | 所有带有匹配选择的元素 |
| [attribute] | $(“[href]”) | 所有带有 href 属性的元素 |
| [attribute=value] | $(“[href=’#’]”) | 所有 href 属性的值等于 “#” 的元素 |
| [attribute!=value] | $(“[href!=’#’]”) | 所有 href 属性的值不等于 “#” 的元素 |
| [attribute$=value] | $(“[href$=’.jpg’]”) | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
| :input | $(“:input”) | 所有 <input> 元素 |
| :text | $(“:text”) | 所有 type=”text” 的 <input> 元素 |
| :password | $(“:password”) | 所有 type=”password” 的 <input> 元素 |
| :radio | $(“:radio”) | 所有 type=”radio” 的 <input> 元素 |
| :checkbox | $(“:checkbox”) | 所有 type=”checkbox” 的 <input> 元素 |
| :submit | $(“:submit”) | 所有 type=”submit” 的 <input> 元素 |
| :reset | $(“:reset”) | 所有 type=”reset” 的 <input>元素 |
| :button | $(“:button”) | 所有 type=”button” 的 <input> 元素 |
| :image | $(“:image”) | 所有 type=”image” 的 <input> 元素 |
| :file | $(“:file”) | 所有 type=”file” 的 <input> 元素 |
| :enabled | $(“:enabled”) | 所有激活的 input 元素 |
| :disabled | $(“:disabled”) | 所有禁用的 input 元素 |
| :selected | $(“:selected”) | 所有被选取的 input 元素 |
| :checked | $(“:checked”) | 所有被选中的 input 元素 |
参考
原文作者： 阮一峰
原文地址：http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
jQuery选择器：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
评论框加载失败，无法访问 Disqus
你可能需要魔法上网~~