一、为什么要新增css特性
原因：使得代码结构更加简便，同时完善之前学的css基础特性留下来的不足
二、新增了哪些特性？
1.属性选择器
2.结构伪类选择器
三、新增标签
1.属性选择器
属性选择器相较于其他的属性选择性更强，更加便捷
a.属性选择器可以不用借用于类选择器或者id选择器，但是他要用[中括号]包含住所需更改的属性值
b. 属性选择器可以选择属性=值的某些元素 十分重要！！！用“=”
c. 属性选择器可以选择属性值开头的某些元素用“^”
d. 属性选择器可以选择属性值结尾的某些元素用“$”
e. 属性选择器可以直接选择属性，无论开头还是结尾用“*”
特别提醒：权重问题很严重！！！一定要注意
其样式：
<style>
input[type=text] {
color: cadetblue;
}
div[class^=icon] {
color: cornflowerblue;
}
section[class$=date] {
color: darkgreen;
}
div.icon1 {
color: red;
}
[class*=icon] {
color: sandybrown;
}
</style>
主体部分
<body>
<input type="text" value="请输入文字">
<input type="text">
<!-- b.属性选择器可以选择属性=值的某些元素 -->
<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-date">我是皮卡丘</section>
<section class="icon2-date">我是小智</section>
<section class="icon3-ico">我是皮丘</section>
<!-- 5.属性选择器可以直接选择属性，无论开头还是结尾* -->
2.结构伪类选择器
语法结构如下例：
":first-child"是选择其父盒子里面的第一个元素
":last-child"是选择其父盒子里面的最后一个元素
“:nth-child()”的（）里面可以设置自己所需要的量
“nth-child()”中如果()是 even 则表示选中其父盒子里面的所有偶数项
同理 odd 表示的是选中奇数项
同时，（）里面还可以放置公式，例如：（n+3)表示的就是从第三项后面的项，即第四项开始被选中，（-n+3)显然表示的是只有第三项前面的项被选中
其样式为
<style>
/* 选择ul里面的第一个孩子--第一个小li */
ul li:first-child {
color: palegreen;
}
/* 选择ul里面的最后一个孩子--最后一个小li */
ul li:last-child {
color: palevioletred;
}
/* 任意选择定义ul里面的一个小li nth-child() ()里面是选择的位数 */
ul li:nth-child(6) {
color: pink;
}
</style>
主体部分
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>
</body>
3.nth-child()和nth-of-type()的异同
相同点：
：nth-of-type()的使用方法和nth-child()的使用方法基本相同，语法结构也相似
如果是无序列表的话，nth-of-type 和 nth-child 是没有区别的 ,而且nth-child会更加便利一点，它用的更多
不同点：
nth-of-type 是先看其前面定义的属性，再看子盒子，它是在指定的范围内进行改变子盒子的属性； nth-child 则是先看后面的盒子，它是包含全部的，然后再看前面定义的属性，如果出现错误，就不会执行指令，比较容易出现事与愿违的情况
一般情况下，比较推荐nth-child()，但具体问题具体分析，大家根据自己的情况选择最优项
如有不足，请在评论区中指正！
