前端 day20

一 H5表单

   1 新增type属性

     email

     url

     number

     range

     color

     search

    time

    mouth

    week

   datetime-local    选取本地时间

   date             只有年月日

2 新增表单属性

     min        

     max       

     required     如果表单没有输入内容的情况下，禁止提交

     step         确定一个法定值  例：3      -6 -3 0 3 6 9

     autocmplete  自动提示信息，属性值on/off

     placeholder   文本框的提示信息

     autofocus     自动聚焦

     pattern       属性值是一个正则表达式（高效的字符串处理规则）

     novalidate     取消验证

     multiple       选择（上传）多个/输入框里面把逗号分隔的当作两个提交的信息

     list            必须和datelist标签结合使用，绑定的datelist的id名称

3 表单新增标签

     <datelist>                做提示信息的，必须和list属性结合使用

         <option value=””>     可以追加一个label属性

     </datelist>

     <output for=”关联的是要做运算的元素的id名称”><output> 做计算结果的输出

二  渐进增强*优雅降级

   1 css3存在一些浏览器不能识别的语法规则（浏览器前缀）

   2 为了考虑兼容：低版本、高版本

   3 渐进增强：根据一些现实情况，先从最基本的版本开始，保证最基本的功能的实现，然后再针对性的考虑高版本，

      提高用户    体验。

   4优雅降级：开始就构造特别完美的需求方案，再针对性的通过减少用户体验，向低版本过渡。

三 css3选择器

   1 属性选择器：通过html属性选择对应的标签

       1 选择符[属性名]{ }          当一个元素有当前html属性值名称则匹配成功

       2 选择符[属性名=“属性值”]    属性和属性名都匹配成功才做选中

       3 选择符[属性~=“属性值”]    当前属性的属性值为一个词列表，单词用空格隔开，只要有当前指定的词就能匹配

       4 选择符[属性^=“字符”]          当这个属性值开头的时候被匹配（只要开头匹配就行）

       5 选择符[属性$=“字符”]          当这个属性值结尾的时候被匹配（只要结尾匹配就行）

       6 选择符[属性*=“字符”]       只要属性值里面包含这个字符就能匹配

       7 选择符[属性|=“字符”]  属性值仅有当前字符或者以字符开头的（left-con）

   2 结构性伪类选择器

       1 h2:first-child{ }   选中h2所在整个集合（父元素）里面第一个h2

          /*选择h2坐在整个集合里的第一个h2*/

         h2:last-child{ }   选中h2所在整个集合（父元素）里面最后一个h2

         h2:nth-child(第几个){ } 通过第几个进行查找（第几个） odd/even  2n+1/2n

         h2:nth-last-child(倒数第几个){ }

         h2:only-child{ }  当前集合里只有一个h2才会被选中

      2 h2:first-of-type { }   选中h2所在整个集合（父元素）里面第一个h2

         /*先去找到h2所在子集，然后提出h2以外的元素，再找第一个h2*/

         h2:last- of-type { }   选中h2所在整个集合（父元素）里面最后一个h2

         h2:nth- of-type (第几个){ }  通过第几个进行查找（第几个） odd/even=2n+1/2n

         h2:nth-last- of-type (倒数第几个){ }

         h2:only- of-type { }  当前集合里只有一个h2才会被选中

       注：先分析当前元素是否为同一类，如果不是同一类，选用of-type选择符。

       补充：

          :root{ }    选中的是根元素

          选择符 :empty{ }        当一个元素没有任何内容或者任何子元素的时候被选中

   3 UI元素状态伪类

     1 :enabled    表单元素可用的时候执行的样式

     2 :disabled    表单元素禁用的时候执行的样式

     3 :checked    表单元素选中（单选、多选）的时候执行的样式

    4 :selection   文本选中的时候执行的样式

 4 动态伪类

    1 E**:link**

       1 链接伪类选择器

        2 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接锚点上

    2 E**:visited**

       1 链接伪类选择器

        2 选择匹配的E元素，而且匹配元素被定义了超链接已被访问过，常用于链接锚点上

   3 E**:active**

      1 用户行为选择器

      2 选择匹配的E元素，且匹配元素被激活，常用于链接锚点和按钮上

   4 E**:hover**

      1 用户行为选择器

      2 选择匹配的E元素，且用户鼠标停留在元素E上，IE6及以下浏览器仅支持a:hover

   5 E**:focus**

      1 用户行为选择器

      2 选择匹配的E元素，且匹配元素获取焦点

5 层级选择器

    1 子选择器

      父元素选择器>子元素选择器，选中父元素最近一层的子元素

    2 兄弟元素选择器

      元素1+元素2，同级，选中元素1同级距离最近的下面的兄弟元素

   3 通用选择器

      元素1~元素2，同级，选中元素1同级下面的所有元素2

四 案例

  1 层级选择器和checked的结合案例