在前面的文章中讲解了CSS中的基础选择器，本篇来讲解一些新的选择器，让开发更加简洁方便。
一、属性选择器
属性选择器通过已经存在的属性名或属性值匹配元素。
| 选择符 | 简介 |
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 匹配具有att属性且值以val开头的E元素 |
| E[att$="val"] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*="val"] | 匹配具有att属性且值且值中含有val的E元素 |
各选择符用法如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3属性选择器</title>
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>这只是一个盒子</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">图标1</section>
<section class="icon2-data">图标2</section>
<section class="icon3-ico">图标3</section>
</body>
</html>效果图如下：
属性选择器的权重是0,0,1,0
二、结构伪类选择器
结构伪类选择器，是针对HTML层次“结构”的伪类选择器。使用结构伪类选择器可以动态的选择HTML中的元素，简化代码。
| 选择器 | 功能描述 |
| E:first-child | 选取父元素中的第一个孩子E |
| E:last-child | 选取父元素中的最后一个孩子E |
| E:nth-child(n) | 选择父元素的第n个子元素，n从1开始计算 |
| first-of-type | 选择父元素下同种标签的第一个元素 |
| last-of-type | 选择父元素下同种标签的倒数第一个元素 |
| nth-of-type(n) | 与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素 |
注： n的值可以是数字、公式或者关键字。
数字：当n的取值为数字时，取值范围为1~n。
关键字：even（偶数）/odd(奇数)
公式：当n的取值是公式是，n从0开始取值。
2n偶数
2n+1奇数
5n 5 10 15…
n+5 从第五个开始
-n+5 前五个 包含5
nth-child(n)和nth-of-type(n)的区别：
<div class="wrap">
<div>第一个子元素</div>
<span>第二个子元素</span>
<div>第三个子元素</div>
</div>nth-child(n)是先将选出的盒子中的所有孩子排序，先选出想要的孩子，再看孩子的标签是否匹配。
<style>
.wrap div:nth-child(2) {
color: red;
}
</style>例如此处就是先将wrap中所有的孩子进行排序，再将第二个孩子span选出来，对比发现和div不同，所以匹配失败。
nth-of-type(n)是将盒子中指定标签的孩子进行排序，再选出指定的孩子。
<style>
.wrap div:nth-of-type(2) {
color: blue;
}
</style>例如此处就是先将wrap中标签为div的孩子进行排序，再将div的第二个孩子选出来修改样式。
结构伪类选择器的权重是0,0,1,0
三、伪元素选择器
伪元素：利用css创建新标签元素，不需要创建html标签，也不能在文档树中查找到该标签，可以简化html结构。
这里主要讲解before伪元素和after伪元素。
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
语法：element::before{
content：
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>伪元素选择器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
content: '我是before伪元素';
font-size: 20px;
color: blue;
}
div::after {
content: '我是after伪元素';
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
这是html中的盒子div
</div>
</body>
</html>效果图：
注意：
before和after 创建一个元素，属于行内元素
这个元素在在文档中找不到，所以称为伪元素
before和after必须有content属性
伪类选择器可以清除浮动。