css选择器详解，带实例

前端css选择器种类繁多，今天做了一下整理，不过该文章只适合前端小萌新，老油条请绕道。

1. 常见选择器

1. 元素选择器

a,p,div,li,ul{
    color:red;
}
/*页面上所有的a,p,li,ul都会将字体颜色设置为红色，不过优先级最低*/

1. id选择器

我会红

1. 类选择器

我会红

1. 属性选择器

我会红

## 2.子元素和后代元素选择器

我不会变色

我是子元素我是子子元素
我是第二个子元素

    
我是li里面的li

我会变红

## 3.伪类选择器
> 伪类专门用来表示元素的一种的特殊的状态。
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框。
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

 `:link`表示普通的链接（没访问过的链接）
 `:visited`表示访问过的链接
 `:hover`表示鼠标移入的状态
 `:active`表示的是超链接被点击的状态
 `:focus`表示文本框获取焦点

ps: ` :hover`和`:active`也可以为其他元素设置(ie6不支持)

说明：普通标签支持`:hover,:focus`其他伪类只有一些特定的标签才支持，比如说：a标签支持:`visited,:active,link`；`button`支持`:active,:focus`。举例：

我是连接
点我我就绿

## 4.伪元素选择器
p:first-letter
作用：选择p中第一个字符
`p:first-line`选择p中的第一行
`:before`表示元素最前边的部分，  一般`before`都需要结合`content`这个样式一起使用，通过`content`可以向`before`或`after`的位置添加一些内容
`:after`表示元素的最后边的部分,就是跟`:before`添加元素的位置不一样，其他是一致的。
## 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选择器<`!important`。不过一般不建议用使用`!important`。如果是相同的优先级，则后写的样式会覆盖前面写的样式。子选择器的优先级低于直接选择的优先级。多个类名的组合的优先级会高于单个类名的优先级。多级的子选择器会比一级的子选择器优先级高。


> 学习如逆水行舟，不进则退，前端技术飞速发展，如果每天不坚持学习，就会跟不上，我会陪着大家，每天坚持推送博文，跟大家一同进步，希望大家能关注我，第一时间收到最新文章。