选择器
1 Jquery:
1.0 $(this) 当前html对象
1.1通选 *
$("*")
1.2id选择器 #
$("#id")
1.3元素选择器
$("element")
1.4类选择器 .
$(".class")
1.5 空格 包含选择器
1.6伪类选择器 :
| :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") | 所有可见的表格 |
| :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 元素 |
1.7 属性选择器 [正则]
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
2 css选择器
2.1 *{}
2.2 元素选择器
类型选择器匹配以逗号隔开的元素列表所标识的所有元素，例如：h1,h2,h3 {}
2.3 类选择器
类选择器可用于将一条规则应用于附带class特性的一个元素或多个元素，其中class特性的值与类选择器中指定的值相匹配，前缀使用"."，例如：.classname {} 或者 td.classname {}
2.4 id选择器
id选择器和类选择器工作方式类似，但是使用的是id特性的值，前缀使用"#"，例如：#idname {}
2.5 关系选择器-子选择器
子选择器所匹配的元素是另外一个元素的直接子元素，例如：td>b {}
2.6 关系选择器-包含选择器（派生选择器 ）
派生选择器所匹配的元素类型是另一个指定元素的派生元素或内嵌的元素，例如：table b {}
2.7 关系选择器-相邻选择器
相邻兄弟选择器匹配指定元素的相邻兄弟元素类型。例如：h1+p {}
2.8 关系选择器-兄弟选择器
通用兄弟选择器匹配指定元素的任何兄弟元素类型，即使它们不是直接的先后关系，例如：h1~p {}
2.9 属性选择器
特性选择器可以使用元素附带的特性以及特性的值，例如：p[特性选择条件] {}
2.10 伪类 真元素~~~嘿嘿，但是有一些特点的真元素 因为在文档树里有些信息无法被充分描述 伪类用一个冒号表示 :first-child
伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
:first-child向元素的第一个子元素添加样式。
:link向未被访问的链接添加样式。
:vistited向已被访问的链接添加样式。
:hover当鼠标悬浮在元素上方时，向元素添加样式。
:active向被激活的元素添加样式。
:focus向拥有键盘输入焦点的元素添加样式。
:lang向带有指定 lang 属性的元素添加样式。
2.11 伪元素 假元素~~嘿嘿 因为在文档树里有些信息无法被充分描述 伪元素则使用两个冒号表示 ::first-line
伪元素用于向某些选择器设置特殊效果。
:first-letter向文本的第一个字母添加特殊样式。
:first-line向文本的首行添加特殊样式。
:before在元素之前添加内容。
:after在元素之后添加内容。
伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述，比如CSS没有“段落的第一行”之类的选择器，而这在一些出版场景里又是必须的。用标准里的话说：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
简单翻译一下，就是：
CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化
这么说很抽象，其实就是为了描述一些现有CSS无法描述的东西。缺少什么，则引入什么，不管是标准，还是人，都是如此成长而来。
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪类用一个冒号表示 :first-child
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪元素则使用两个冒号表示 ::first-line
