css选择器详解，带实例

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

1. 常见选择器

元素选择器

a,p,div,li,ul{

color:red;

}

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

id选择器

#test{

color:red;

}

/*id选择器通过id属性来绑定一个唯一id，样式通过# + ‘id’来实现关联，优先级较高*/

类选择器

.test{

color:red;

}

/*类选择器通过class属性来绑定一个类名，样式通过. + ‘class’来实现关联，优先级低于id选择器，这种选择器是用的最多的*/

属性选择器

[src^="test"]{

color:blue;

}

.test[src]{

color:red;

}

/*属性选择器通过[attr=*]来选择具有该属性的元素，属性值支持通配符(不做具体详解)形式，优先级较低，多种选择器可以结合使用，上例中，后者优先级高于前者，所以呈现的字体为红色。*/

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

我是子元素我是子子元素

我是第二个子元素

我是li里面的li

ul li{

margin-left:20px;

}

/*通过空格隔开的方式选择所有子元素，这样，ul里面的所有li都会应用到左边距20px的样式,包括li里面的li*/

ul>li{

padding-left:20px;

}

/*通过选择器 > 选择器 来选择直接子元素，意思是说，只有第一级的li会被应用成左内边距20px,而li里面的li不会被应用到。*/

ul + p{

background-colo:red;

}

/*通过 选择器 + 选择器 来选择兄弟元素，这样让下面的p元素的背景色为红色，而第一个p标签的背景色不会变。*/

3.伪类选择器

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

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

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

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

a:link{

color:blue;

}

/*连接未被访问过，为blue颜色*/

a:visited{

color:red;

}

/*访问之后，变成红色*/

a:hover{

font-size:40px;

}

/*鼠标一上去，字体变大*/

button:focus{

color:green;

}

/*点击按钮，按钮聚焦，会变成绿色*/

button:active{

color:red;

}

/*点击按钮的过程中，按钮颜色会变红*/

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。如果是相同的优先级，则后写的样式会覆盖前面写的样式。子选择器的优先级低于直接选择的优先级。多个类名的组合的优先级会高于单个类名的优先级。多级的子选择器会比一级的子选择器优先级高。