CSS3的现状：
1.CSS3新增选择器
1.1 属性选择器
1.属性选择器可以根据元素特定属性来选择元素，不用借助类或者id选择器
2.
匹配上面选择符：
^表示选择开头，$选择结尾，*选择任意名字
<style>
/* 1.必须是input，但同时具有value这个属性 */
/* input[value]{
color: pink;
} */
/* 2. */
/* input[type=text]{
color: pink;
} */
/* 3.选择首先是div，然后具有class属性，并且属性值必须是icon开头的这些元素 */
/* div[class^=icon]{
color: red;
} */
/* 4 */
section[class$=data]{
color: royalblue;
}
</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">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">我是乌鲁乌鲁</section>
</body>注意：类选择器，属性选择器，结构伪类选择器，权重10
1.2 结构伪类选择器
1.结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素
2.选择符分类
前三个选择符：style里面ul后空格li时后代选择器
<style>
/* 1.选择ul里第一个孩子 */
ul li:first-child{
background-color: royalblue;
}
/* 2.选择最后一个孩子 */
ul li:last-child{
background-color: pink;
}
/* 3.选择第2个孩子 */
ul li:nth-child(2){
background-color: plum;
}
</style>
</head>
<body>
<ul>
<li>孩子1</li>
<li>孩子2</li>
<li>孩子3</li>
</ul>
</body>3.nth-child(n)的重点应用（无序列表中用的更多）
?nth-child（n）选择某个父元素的一个或多个特定的子元素
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字从1开始
- n可以是关键字：even偶数，odd奇数（放括号里面就能选出奇数行和偶数行进行样式设定）
- 可以是公式：常见的公式如下（若n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被省略）
例如：body里面给出ol里面分别有8个li，在style里面
ol li：nth-child(n){
background-color：pink；
}
表示：nth-child(n) 从0开始 每次加1? 往后面计算? 括号里面必须是n，不能是其他字母 ，n意味着选择了所有孩子
?2n：n从0开始一直到最大（例如有8个li，就到8）----->2*n--->0，2，4，6，8
? ? ? ? ?选择了所有的偶数的孩子==等价于even
n+5：n从0开始一直到最大，即0+5=5,1+5=6,2+5=7......一直到最后
-n+5：n从0开始一直到最大，-n是-0，-1，-2，-3，-4，-5，加5就是从5到0
后三个选择符：
ul li:first-of-type:选择第一个孩子
ul li:last-of-type:选择最后一个孩子
ul li:nth-of-type(even):选择偶数孩子，用法与nth-child()一模一样
前三个与后三个区别(开发中常见)：
1.nth-child对父元素里面的所有孩子排序(序号是固定的)先找到第n个孩子，然后看是否能和E匹配
2.nth-of-type对父元素里面指定子元素进行排序选择，先匹配E，然后再根据E找第n个孩子
区别举例：
<style>
/* nth-child 会把所有盒子都排列序号 */
/* 执行的时候首先看nth-child()括号里面的数字 之后回去看前面的div */
section div:nth-child(1){
background-color: red;
/* 这个输出是错的，因为第一个标签是p不是div */
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1){
background-color: rosybrown;
}
</style>
</head>
<body>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
1.3 伪元素选择器（重点）
? ? 1.3.1 伪元素选择器基本使用
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，简化html结构
第四个使用原理：before和after都在盒子里，before在内容的最前面，after在内容的最后面
?
这是注意点第四个的应用，必须有content属性：
?before，after是行内元素无法设置大小，如果要设置宽高，先转化成行内块元素
?1.3.2 伪元素选择器使用场景1：伪元素字体图标
eg：一个盒子有下拉按钮或小米侧边栏的左向按钮
<style>
div{
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
/* 子绝父相 */
div::after{
position: absolute;
top: 10px;
right: 10px;
color: red;
font-size: 18px;
font-family: 'icomoon';
content: '箭头';
/* 此处按照插入小图标的方法把箭头插入进去，或者复制给出的字符e91e但是在前面加\ */
}
</style>
</head>
<body>
<div></div>?1.3.3?伪元素选择器使用场景2：仿土豆效果黑色遮罩层
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
/* 隐藏遮罩层 */
content: '';
display: none;
/* 隐藏对象 */
position: absolute;
/* 行内元素设置了绝对或者固定定位，可以设置宽高 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>?1.3.4?伪元素选择器使用场景：伪元素浮动清除浮动本质
?清除浮动第三种：父级添加after伪元素
通过after伪元素创建一个盒子，类似隔墙法升级
代码解释：?
?
?清除浮动第四种：父级添加双伪元素（形成闭合）
?代码解释：
