选择器

概念问题

伪类：不存在与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