<!-- 我们验证的时候必须添加form表单域 --><form action=""><ul><li>邮箱: <input type="email" /></li><li>网址: <input type="url" /></li><li>日期: <input type="date" /></li><li>时间: <input type="time" /></li><li>数量: <input type="number" /></li><li>手机号码: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>颜色: <input type="color" /></li><!-- 当我们点击提交按钮就可以验证表单了 --><li> <input type="submit" value="提交"></li></ul></form>
常见输入类型
text password radio checkbox button file hidden submit reset image
新的输入类型
类型很多，我们现阶段重点记忆三个：numbertelsearch
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素
E:first-child
匹配父元素的第一个子元素E
<style>ul li:first-child{background-color: red;}</style><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>
E:last-child则是选择到了最后一个li标签
E:nth-child(n)（★★★）
匹配到父元素的第n个元素
匹配到父元素的第2个子元素
ul li:nth-child(2){}
匹配到父元素的序号为奇数的子元素
ul li:nth-child(odd){}odd是关键字 奇数的意思（3个字母 ）
匹配到父元素的序号为偶数的子元素
ul li:nth-child(even){}even（4个字母 ）
匹配到父元素的前3个子元素
ul li:nth-child(-n+3){}
选择器中的n是怎么变化的呢？
因为 n是从 0 ，1，2，3.. 一直递增
所以 -n+3 就变成了
n=0 时 -0+3=3n=1时 -1+3=2n=2时 -2+3=1n=3时 -3+3=0...
一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码
常用的结构伪类选择器是：nth-child(n) {...}
E:nth-child 与 E:nth-of-type 的区别
这里只讲明E:nth-child(n)和E:nth-of-type(n)的区别 剩下的E:first-of-typeE:last-of-typeE:nth-last-of-type(n)同理做推导即可
<style>ul li:nth-child(2){/* 字体变成红色 */color: red;}ul li:nth-of-type(2){/* 背景变成绿色 */background-color: green;}</style><ul><li>列表项一</li><p>乱来的p标签</p><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>
也就是说：
E:nth-child(n)匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
小结
结构伪类选择器一般用于选择父级里面的第几个孩子nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式如果是无序列表，我们肯定用 nth-child 更多类选择器、属性选择器、伪类选择器，权重为 10
