今天在做项目的时候，发现选择器有些遗忘。特写此文章来加深记忆，也方便自己日后回顾。
通用选择器 *
//有时候为了浏览器内置样式，可能会这样写。
//但一般不推荐！！！
*{ margin:0;padding:0; }标签选择器 E
ID选择器 #myid
类选择器 .myclass
类选择器和ID选择器算是最常见两种选择器。
这里要讲一下关于选择器优先级。
优先级从高到低分别为：
内联样式、ID、class/属性选择器/伪类选择器[如:hover,:focus]等、元素选择器/伪元素选择器[如:before,:after]
如果两个优先级相同，则按照声明顺序，写在【样式表】后面的起作用。
【注意！是在样式表中的位置！而不是在使用的位置！】
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
最后p的颜色显示为red！！！是写在样式表后面的.classB起作用！
属性选择器
E[disable] E中定义了disable属性的元素。E可省略，则表示选择定义了disable属性的任意类型的元素
E[att='val'] 匹配所有att属性等于val的E元素。E可省略，同上。
-
E[att~=key] 匹配att属性有key的元素,att属性是一个以空格符分隔的列表。
<a title="bar1 bar2 bar3"></a> <a title="bar2 bar3 bar4"></a> a[title~="bar1"]匹配第一个a元素 -
E[att|=es] 匹配E的元素，且att属性值是以es开头，att属性是用‘-’分隔的列表。
<body lang ="en-us"></body> <body lang ="fr-argot"></body> [lang|en] 匹配第一个body元素 E[att*="bar"] 匹配E的元素，且att属性值包含bar的子字符串。
E[att^="http://"] 匹配E的元素，且att属性以http://开头
E[att$=".png"] 匹配E的元素，且att属性以.png结尾
伪类选择器
E:link 被定义了超链接并未被访问
E:visited 被定义了超链接并已经访问
E:active 匹配元素被激活
-
E:hover 匹配元素正在被鼠标经过
【注意顺序：LVHA :link->:visited->:active:->:hover】 举个栗子。 a:link {color: blue;} a:active {color: red;} a:hover {color: magenta;} a:visited {color: purple;} 由于优先级相同，按照先后顺序来显示。 一个未被访问过的链接可以同时是hover和active的状态，但是由于visited写在最后，所以会覆盖了:active和:hover的样式。那么这个链接都是紫色的,无法呈现:active和:hover的状态。 E:focus 匹配元素获取了焦点
E:first-child 匹配E的元素，且该元素是父元素的第一个子元素
E:last-child 父元素中最后一个位置，且匹配E的子元素
E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素
E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n) 在所有满足E的元素内的第n个元素
E:first-of-type 相当于E:nth-of-type(1)
-
E:last-of-type 相当于E:nth-last-of-type(1)
这里nth-child/nth-last-child和nth-of-type容易混淆。 <div> <h1></h1> <p>123</p> <p>456</p> </div> p:nth-of-type(2){color:red;} p:nth-child(2){color:blue;} 效果： 123为蓝色。p:nth-child(2)匹配其父元素中第二个位置的p元素。若div元素第二个位置元素不是p元素，则不起作用。 456为红色。p:nth-of-type(2)匹配div中所有p元素中的第二个。 E:empty 匹配E的元素，且不包含子节点。【文本也属于节点】
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
E:not(s) 否定伪类选择器。匹配E且不满足s选择符的元素。
E:root 匹配文档根元素
E::selection 匹配当前选中的元素
E:checked 匹配E的所有被选中UI元素radio/checkbox
E:enabled 匹配E的所有可用UI元素
-
E:disabled 匹配E的所有不可用UI元素
在网页中，UI元素一般是指包含在form元素内的表单元素 <form> <input type="text" /> <input type="button" disabled="disabled" /> <input type="checkbox" /> <input type="radio" checked="checked" /> </form> input:checked 匹配单选按钮，不匹配复选框 input:enabled 匹配文本框，复选框，单选按钮，不匹配button input:disable 匹配button
关系选择器
A E 后代选择器。匹配E，且是被包含在A内的元素。只要是A的后代即可。
A > E 子包含选择器。匹配E的元素，且是A元素的子元素！只能是子元素，不能是孙元素等。。
B + E 相邻兄弟选择器。匹配E的元素，该元素位于B后面相邻位置！
A ~ E 通用兄弟选择器。匹配E的元素，该元素位于E元素的后面，且在同一级结构。即兄弟位置。
伪元素选择器
E:first-line E元素内第一行文本
E:first-letter E元素内第一个字符
E:before 在E元素之前插入生成内容
E:after 在E元素之后插入生成的内容
之前利用选择器和css3动画写了一个筛选菜单的效果。
github地址如下：https://github.com/Lsxj/css3/tree/master/css-filter
效果如下：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。