小孩子才做选择，“大人”的世界我全都要

---

前言

小编在前面总结过我们的CSS有基础选择器和复合选择器。基础选择器有标签选择器、类选择器、id选择器、通配符选择器。复合选择器又分为后代选择器，子选择器，并集选择器以及伪类选择器。而现在CSS3又为我们新增了几个选择器，我们一起来看看吧！

---

一、属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不借助类或者id选择器。文档中的E代表着元素标签，att代表的是属性，val代表的是属性值。

1.E[att]：选择具有att属性的E元素

使用方法如下：
HTML代码：

		<div class="one">
        我相信努力的人，未来都不会差！
        </div>
    	<div>因为你的努力将成为你的未来！</div>

css代码：

div[class]{
            color: skyblue;
        }

2.E[att^=“val”]：匹配具有att属性且值以val开头的E元素

使用方法如下：
HTML代码：

		<div class="one">
        我相信努力的人，未来都不会差！
        </div class="onew">
    	<div>因为你的努力将成为你的未来！</div>

css代码：

div[class^="on"]{
            color: skyblue;
        }

3.E[att=“val”]：选择具有att属性且属性值等于val的E元素

使用方法如下：
HTML代码：

		<div class="one">
        我相信努力的人，未来都不会差！
        </div>
    	<div>因为你的努力将成为你的未来！</div>

css代码：

div[class="one"]{
            color: skyblue;
        }

4.E[att$=“val”]：匹配具有att属性且值以val结尾的E元素

使用方法如下：
HTML代码：

		<div class="one">
        我相信努力的人，未来都不会差！
        </div>
    	<div class="osfe">因为你的努力将成为你的未来！</div>

css代码：

div[class$="e"]{
            color: skyblue;
        }

5.E[att*=“val”]：匹配具有att属性且值中包含val的E元素

使用方法如下：
HTML代码：

		<div class="one">
        我相信努力的人，未来都不会差！
        </div>
    	<div class="faonede">因为你的努力将成为你的未来！</div>

css代码：

div[class*="one"]{
            color: skyblue;
        }

二、结构伪类选择器

结构伪类选择器主要是根据文档结构来选择其元素，常用于根据父级选择器里面的子元素。文档中的E代表父元素

1.E:first-child：匹配父元素中的第一个子元素E

使用方法如下：
HTML代码：

		<div>
        <p>我相信努力的人，未来都不会差！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
    </div>
    	

css代码：

div p:first-child {
            color: skyblue;
        }

效果展示：

2.E:last-child：匹配父元素中最后一个E元素

使用方法如下：
HTML代码：

		<div>
        <p>我相信努力的人，未来都不会差！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
    </div>
    	

css代码：

div p:last-child {
            color: skyblue;
        }

效果展示：

3.E:nth-child(n)：匹配父元素中的第n个子元素E

使用方法如下：
HTML代码：

		<div>
        <p>我相信努力的人，未来都不会差！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
    </div>
    	

css代码：

div p:nth-child(2) {
            color: skyblue;
        }

效果展示：

4.E:first-of-type：指定类型E的第一个

使用方法如下：
HTML代码：

		<div class="one">
        <p>我相信努力的人，未来都不会差！</p>
        <span>因为你的努力将成为你的未来！</span>
        <p>因为你的努力将成为你的未来！</p>
        <div>因为你的努力将成为你的未来！</div>
    </div>
    	

css代码：

.one p:first-of-type {
            color: skyblue;
        }

效果展示：

5.E:last-of-type：指定类型E的最后一个

使用方法如下：
HTML代码：

		<div class="one">
        <p>我相信努力的人，未来都不会差！</p>
        <span>因为你的努力将成为你的未来！</span>
        <p>因为你的努力将成为你的未来！</p>
        <div>因为你的努力将成为你的未来！</div>
    </div>
    	

css代码：

.one p:last-of-type {
            color: skyblue;
        }

效果展示：

6.E:nth-of-type(n)：指定类型E的第n个

使用方法如下：
HTML代码：

		<div class="one">
        <p>我相信努力的人，未来都不会差！</p>
        <span>因为你的努力将成为你的未来！</span>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <p>因为你的努力将成为你的未来！</p>
        <div>因为你的努力将成为你的未来！</div>
    </div>
    	

css代码：

.one p:nth-of-type(5) {
            color: skyblue;
        }

效果展示：

三、伪元素选择器

伪元素选择器我用三个小小的例子为大家进行演示，同时这三个小小的例子也是伪元素的三个使用场景。

1.字体图标案例

HTML代码如下：

<div>

</div>

CSS代码如下：

@font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?np6rsy');
            src: url('fonts/icomoon.eot?np6rsy#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?np6rsy') format('truetype'), url('fonts/icomoon.woff?np6rsy') format('woff'), url('fonts/icomoon.svg?np6rsy#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        div {
            width: 300px;
            height: 35px;
            border: 1px solid red;
            position: relative;
        }
        
        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\e906';
            color: red;
        }

效果展示：

2.图片阴影案例

HTML代码如下：

<div class="tudou">
        <img src="tudou.jpg" alt="">
    </div>

CSS代码如下：

.tudou {
            width: 444px;
            height: 320px;
            margin: 30px auto;
            background-color: pink;
            position: relative;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .tudou::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            background: rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
        }
        
        .tudou:hover::before {
            display: block;
        }

效果展示：

3.伪元素清除浮动

代码如下：

.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}

在清除浮动时，可以直接调用这个类，达到清除浮动的效果。

总结

今天小编的分享就到这里了!