[TOC]
# 1.css选择器
> **定义选定你所要改变的元素的一种方式。**
## 1.1分类
~~~
<p class="test" id="first">hello world</p>
<h4>标题</h4>
~~~
~~~
(1)css元素选择器
p{color:pink}
(2)class选择器
.test{color:yellow}
(3)id选择器
#first{color:blue}
(4)分组选择器
p,h4{background:gray}
(5)后代选择器
div>span{} //选取div所有子元素为span的标签
div span{} //选中div之后的所有span元素
(6)兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
(7)伪类选择器
div:hover{}
input:focus{}
(8)伪元素-->用css自定义生成的元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
(9).属性选择
div[class='test']{}
~~~
> http://www.w3school.com.cn/cssref/css_selectors.asp
## 1.2选择器的优先级别排序
`<div class='test' id='first'>hello world</div>`
~~~
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
~~~
## 1.3选择器的权重
~~~
<div class="parent">
<div class="child">child</div>
</div>
/* 选择器嵌套的层次越深,那么权重越高 */
.child{
color:red;
}
.parent>.child{
color:green;
}
~~~
# 2.css常用选择器
<p class="one" id="two">hello world</p>
p{} //元素选择器
p.one{} //class选择器
p#two{} //id选择器
