WEEK4 Day4 H5表单，css选择器

WEEK4 Day4 H5表单，css选择器

今日总结：今天学习的东西比较杂而且单词量也比较多，不容易记忆。通过今日的学习，学习了H5中的表单新加的属性、css中的渐进增强和优雅降级、css3中的属性选择器、css中的结构性伪类选择器、UI元素状态伪类、动态伪类和层次选择器。

H5表单

1：新增加的type类型
email
url
number
range
color
search

time 时间类型
month 月份
week 周
datetime-local 选取本地时间
date 只有年月日

2: 新增的html属性
min 最小值
max 最大值
required 如果表单没有输入内容的情况下，禁止提交
step 确定一个法定值eg : 3 -6 -3 0 3 6 9
autocomplete 自动提示信息 属性值 on/off
placeholder 文本框的提示信息
autofocus 自动聚焦
pattern 属性值是一个 正则表达式(高效的字符串处理规则)
novalidate 取消验证
multiple 选择（上传）多个 \ 输入框里面把逗号分隔的当作两个提交的信息
list属性 必须和datalist 标签结合使用,绑定的datalist的id名称

3:表单里面新增标签
< datalist> 做提示信息的 必须和list属性结合使用
< option value=""> 可以追加一个label属性
< /datalist>

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

渐进增强&优雅降级

css3 存在一些浏览器不能识别的语法规则 ( 浏览器前缀 )为了考虑兼容: 低版本 高版本
渐进增强\优雅降级

渐进增强:举例说明:

需求: 一个贫穷的小山村,为了能让所有的村民都能 通过照明工具进行照明，并进行日常生活。
方案:
通过通电进行照明。
根据现实情况: 小山村地势\交通情况, 不能短时间通电
先保证最基本的业务需求 -> “照明” -> 每户发蜡烛(用户体验不好)
然后保证基本功能实现之后 -> 通电 ( 提升用户体验度 )
渐进增强过程:先从最基本的版本开始,保证最基本的功能的实现,然后针对性的考虑高版本,提升用户体验.

优雅降级:举例说明:

需求: 一个贫穷的小山村,为了保障人均GDP的增长,缩小贫富差距
方案: 劫富济贫 -> 打土豪.
优雅降级: 开始就构造特别完美的需求方案, 再针对性的 例如:通过减少用户体验,向低版本过渡.。

css3属性选择器

css属性选择器: 通过html属性选择对应的标签
1 选择符[属性名]{ } 当一个元素有当前html属性值名称则匹配成功.
2 选择符[属性名=“属性值”] 属性和属性名都匹配成功才做选中
3 选择符[属性~=“属性值”] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配.
4 选择符[属性^=“字符”] 当这个属性值开头的时候被匹配(只要开头匹配就行)
5 选择符[属性$=“字符”] 当这个属性值结尾的时候被匹配(只要结尾匹配就行)
6 选择符[属性*=“字符”] 只要属性值里面包含这个字符就能匹配
7 选择符[属性|=“字符”] 属性值仅有当前字符 或者 以字符-开头的 (left-con)

结构性伪类选择器

结构性伪类选择器 : 通过第几个进行查找

h2:first-child { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-child { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-child(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-child(倒数第几个){ }
h2:only-child { } 当前集合里面只有一个h2才会被选中

h2:first-of-type { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-of-type { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-of-type(倒数第几个){ }
h2:only-of-type { } 当前集合里面只有一个h2才会被选中

总结: 分析:当前同级元素是否为一类,如果非一类的情况下 选用of-type选择

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

UI元素状态伪类

:enabled 表单元素可用的时候执行的样式
:disabled 表单元素禁用的时候执行的样式
:checked 表单选中(单选 多选按钮选中的时候)

::selection 文本选中的时候的样式.

动态伪类

E**:link**
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E**:visited**
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E**:active**
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

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

E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点。

层次选择器

层级选择器：
1：子选择器
父元素选择器>子元素选择器 选中只是父元素最近一层的子元素。

2:兄弟元素选择器
元素1+元素2 同级 选中元素1同级离得最近的下面的兄弟元素

3:通用选择器
元素1~元素2 同级 选中元素1同级下面的所有的元素2