概念问题
伪类：不存在与DOM树中的信息与不能被常规选择器获取到的信息
伪元素：在DOM树中创建了一些 不存在于文档语言中的抽象元素
通用选择器
这种选择器用于选择所有元素
用法：*{}
类选择器
<img class="className" />
.className {} //css 对类名为className的元素进行样式配置
$('.className') //jq 获取类名为className的元素
ID选择器
<img id="idName" />
#idName {} //css 对id为idName的元素进行样式配置
$('#idName') //jq 获取id为idName的元素
标签选择器
<img />
img {} //css 对html标签为img的元素进行样式配置
$('img') //jq 获取html标签为img的元素
复合选择器
<p id="p1">p1</p>
<p class="p2">p2</p>
<p>p3</p>
#p1,.p2,p {} //css 对指定元素进行样式配置
$('#p1,.p2,p')//jq 获取指定元素
后代选择器
<div id="grandFather">
<div id="father">
<p id="son">son</p>
</div>
<p id="other">other</p>
</div>
#grandFather p {} //css id为grandFather的 标签为p的所有后代元素(包含儿子 孙子 一直孙下去)进行样式配置
$('#grandFather p')//jq 获取 grandFather的 标签为p的所有后代元素
子代选择器
<div id="grandFather">
<div id="father">
<p id="son">son</p>
</div>
<p id="other">other</p>
</div>
#grandFather > p {} //css id为grandFather的标签为p的所有子代元素(只包含儿子)进行样式配置
$('#grandFather > p')//jq 获取 grandFather的标签为p的所有子代元素
相邻同胞选择器
<div id="grandFather">
<div id="father"></div>
<p id="other">other</p>
<p id="son">son</p>
</div>
#father+p {} //css id为father的后面紧贴的标签为p兄弟元素(只会获取一个 紧贴) 样式配置
$('#father + p')//jq 获取 id为father的后面紧贴的标签为p兄弟元素
属性选择器
<div index="jj">index</div>
<div index="k">index</div>
<div hh="hh">index</div>
<p index="index">index</p>
#css1 css2
[index] {} //css 获取所有属性包含index的元素 进行样式设置
$('[index]')//jq 获取所有属性包含index的元素
div[index] //css 获取所有属性包含index的div元素 进行样式设置
$('[index]')//jq 获取所有属性包含index的div元素
[index=jj] //获取所有属性index为jj的元素
[index ~= in] //获取所有属性index值中包含in单词的元素 //index='index'不包含in单词 index='in dex'包含in单词
[index |= in] //获取所有属性index值中以in开头的元素
//index='index'不以in开头 index='in-dex'以in开头 一般用作语言判断
//<p lang="en">Hello!</p> <p lang="en-us">Hi!</p>
#css3
[index ^= in] //获取所有属性index值中以in开头的元素 index=index 合理
[index $= x] //获取所有属性index值中以x结尾的元素 index=index 合理
[index *= in] //获取所有属性index值中包含in单词的元素 index=index 合理
伪类选择器
<a href="#"></a>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
:first-child //向元素的第一个子元素添加样式
:lang //向带有指定 lang 属性的元素添加样式
:focus //向拥有键盘输入焦点的元素添加样式
伪元素选择器
<div></div>
div:before {}
div:after {}
//浮动清除
.clearfloat:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat {
zoom:1
}
权重问题 对于css样式配置
元素选择器 0001
类选择器 0010
id选择器 0100
内联样式 1000
!important 无限大
注意点：无进位 遇10不进位 例：0 0 0 10
参考
https://baike.baidu.com/item/css选择器/2819686
http://www.runoob.com/cssref/css-selectors.html
