前端 CSS 选择器有很多种类型。 我今天已经把它们整理出来了。 不过这篇文章只适合前端新手，有经验的请避开。
1. 常用选择器元素选择器
a,p,div,li,ul{
color:red;
}
id选择器
我会红
<style>
#test{
color:red;
}
</style>
类选择器
我会红
<style>
.test{
color:red;
}
</style>
属性选择器
我会红
<style>
[src^="test"]{
color:blue;
}
.test[src]{
color:red;
}
</style>
2. 子元素和后代元素选择器
我不会变色
- 我是子元素>我是子子元素
- 我是第二个子元素
-
- 我是li里面的li
我会变红
<style>
ul li{
margin-left:20px;
}
ul>li{
padding-left:20px;
}
ul + p{
background-colo:red;
}
</style>
3. 伪类选择器
伪类专门用于表示元素的特殊状态。
例如：访问过的超链接，比如普通的超链接，比如有焦点的文本框。
当我们需要在这些特殊状态下设置元素的样式时，可以使用伪类。
:link 代表普通链接（未被访问过的链接）
：表示访问过的链接
:hover表示鼠标移入的状态
：表示超链接被点击的状态。
:focus 表示文本框获得焦点
ps: :hover 和 : 也可以为其他元素设置（ie6不支持）
注：普通标签支持：hover、:focus。 其他伪类仅受某些特定标签支持。 例如：一个标签支持:,:,link； 支持:,:焦点。 例子：
我是连接
<style>
a:link{
color:blue;
}
a:visited{
color:red;
}
a:hover{
font-size:40px;
}
button:focus{
color:green;
}
button:active{
color:red;
}
</style>
4. 伪元素选择器
p：首先-
功能：选择p中的第一个字符
p:first-line 选择 p 中的第一行
: 代表元素的前部。 一般需要和这种风格配合使用。 您可以在该位置或之后添加一些内容。
:after 表示元素的最后部分，与:添加元素的位置不同，其余相同。
5.子元素伪类选择器
:first-child 可以选择第一个子元素
:last-child 可以选择最后一个子元素
:nth-child(XXX) 可以选择任意位置的子元素。 您可以在选择器后面指定一个参数来指定选择哪个子元素。 Even表示偶数位置的子元素，odd表示奇数位置的子元素。
:first-of-type、:last-of-type、:nth-of-type 和 :first-child 非常相似，只不过 child 排列在所有子元素中，而 type 排列在当前类型中排列的子元素
6.优先权
显然，上面的多个选择器会重叠和冲突。 在很多本地库中，我们在引入的时候，需要覆盖掉原来的样式。 这时候我们就可以利用选择器优先级来覆盖原库中的样式。
元素选择器 < 属性选择器 < 类名选择器 < id 选择器
学习如逆水行舟。 不进则退。 前端技术正在快速发展。 如果你不每天坚持学习，你就跟不上。 我会陪着你，坚持每天推送博文，和你一起进步。 我希望你能关注我。 第一时间接收最新文章。
