CSS3属性选择器，伪元素，伪类，伪元素清除浮动（微重点）

css3中的伪元素

我们知道在属性选择器之前我们一直使用的是id，class，标签，通配符,important选择器；但是这些选择器虽好用，但是也有自身的局限性，就比如ul中有20个小li，项目效果是实现奇数显示深灰色背景，偶数li显示浅灰色背景，那么你用哪个？id?还是类？很显然都不合适，这个时候应该用css3中的伪元素，使用 标签:nth-child(2n){ 样式代码；}；来实现偶数的选择；使用标签：nth-chlid(2n+1){ 样式代码};来实现奇数li的选择。 而如果使用我们的类class选择器就要给这20个小li的偶数li添加相同的类名，这20个还好的话,1000个呢？是不是就不合适了。因此伪类选择器还是非常有必要的，对咱们前端程序员是非常有好的。

那么我说几个常用的伪类选择器吧。

1. 标签:first-child{};
2. 标签:last-child{}；
3. 标签:nth-child(这里填第几个孩子,从这个标签父元素里面的第一个孩子开始查，第一个元素不一定是目标元素){}
4. 标签:nth-of-type(这里就不一样了，这个填写1，那就是目标标签的第一个，而不是像上面的一样无脑的从第一个开始查){}

nth-child();和nth-of-type();的区别；nth-child();使用这个伪类，那么在查找目标元素的时候就是从第一个标签开始查，不管这个标签是不是目标标签，如下代码：

.box a:nth-child(2) {     
            text-decoration: none;
}
// 以上代码选择的是box盒子下的第二个标签，也就是第一个a标签，而不是第二个a标签。

<div class="box">
        <p>fdsa</p>
        <a href="">ffff</a>
        <a href="">kkkk</a>
</div>

nth-of-type();

.box a:nth-of-type(2) {
            text-decoration: none;
}
// 以上代码选择的是第二个a标签，对比上面的nth-child代码，很显然这一个才是我们想要的，改变第二个a的效果。

 <div class="box">
        <p>fdsa</p>
        <a href="">ffff</a>
        <a href="">kkkk</a>
</div>

综上所述：如果是只改变一种标签的不同数量的样式，就用nth-of-type();如果是改变一个父元素下所有的元素不同数量的样式，用nth-child（）；当然如果父元素下只有一种元素，那么这两种的效果是一样的，因为nth-child()中，只有一种标签的话是从的第一个开始查，而nth-of-type()是从目标标签的第一个开始查，而父元素中没有其他类标签，因此都是从第一个查起，效果也就想同啦。

伪元素选择器
主要有两种，一种是 标签::before；和 标签::after,使用的场景还是不少的，比如清除浮动，在一行文字前面或者后面添加一个logo，小图片等等。
在这里就说说清除浮动吧：代码如下：

.clearfix::before;.clearfix::after{
	content:"";
	display:table;   为了让前后元素显示到一行。
}
.clearfix::after{
	alear:both;
}
.clearfix{
	*zoom:1;
}

属性选择器：
属性选择器是也是一种非常方便的选择标签的方式，可以不使用类，id等等直接根据一些元素特有的属性来选择，比如在表单中会有类型，type，想选择这个类型的标签很简单，使用以下代码即可比如是input,input[type]{样式代码} 这种还不是非常具有针对性，我们知道type的类型太多了，css，css3中加起来有一二十种，怎么确定一下呢？那就用下面的代码input[type="text"]{样式代码} 这样就能限制性的选择type中类型为text的表单。 那么你又要问了，如果我想选择text类型中第二个呢？第三个呢？怎么办？那么咱们还可以添加限制，咱们给他添加一个name属性，让他等于 name = “text-even”;even是假设的，我给他的寓意是偶数，odd是奇数；接下来咱们进行三种操作，第一种选择属性值前面为text的标签控制他的样式input[name^="text"]{样式代码} 特别注意^这个符号，代表某属性的前半部分；那么此时也就选中了这个input控件，以为他的名字的前半部分中含有type那么你要问了，有没有后半部分的？有！看代码‘input[name$="even"]{样式代码}这样也就选择了name中含有even的所有表单控件是不是很简单？你又要问了，那么万一我的名字起的很随意，我想只要含有某个字母就选中他行不行？完全可以！ 怎么设计呢？看代码input[name*="dd"]{样式代码} 特别注意*号，这个符号代表任意name中含有dd的表单控件。

总结一下 ： 属性选择器 符号^代表选择属性值前面含有某个名字的标签。符号$代表选择属性值后面含有某个值的标签，符号*代表属性值任意一个位置含有这个名字的标签。如果这是三种都使用，那么就是单纯的属性值等于某个类型，或者类型值。