day20 knowledge
1. New type type added to the form:
email url URL
number range
range color
search
time 时间类型 month 月份
week 周 datetime-local 选取本地时间
date 年月日
新增的html属性：
min max
required 如果表单没有输入内容的情况下，禁止提交
step 确定一个法定值 ：3 -6 -3 0 3 6 9
autocomplete 自动提示信息 属性值 on/off
placeholder 文本框的提示信息
autofocus 自动聚焦
pattern 属性值是一个 正则表达式（高效的字符串处理规则）
novalidate 取消验证
multiple 选择（上传）多个\输入框里面的逗号分隔的当作两个提交的信息
list属性 必须和datalist 标签结合使用，绑定的datalist的id名称
表单里面新增标签
<datalist> 做提示信息的 必须和list属性结合使用
<option value=“”> 可以追加一个label属性
</datalist>
<output for="关联的是要做运算的元素的id名称"><output> 做输出的(计算结果的输出)
Second, the css attribute selector: select the corresponding tag through the html attribute selector
[attribute name] {} When an element has the current html attribute value name, the match is successful.
Selector [attribute name = "attribute value]] {} attributes and Select only if the attribute names match successfully.
Selector [attribute ~ = “attribute value”] {} The attribute value of the current attribute is a list of words (multiple words separated by spaces), as long as there is the currently specified word, the
selection can be matched The character [attribute ^ = "character"] {} is matched when the attribute value starts (as long as the beginning matches the match) the
selector [attribute $ = "" character "] is matched when the attribute value ends (as long as the end matches OK)
selector [attribute * = “character]] As long as the attribute value contains this character, it can match
selector [attribute | =“ character ”] The attribute value is only the current character or starts with the character- (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-of-type { } 当前集合里面只有一个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选择
Supplement::
root {} selects the root element
selector: empty {} is selected when an element has no content or any child elements
3. Pseudo-class of ui element status
: enabled The style executed when the form element is available
: disabled The style executed when the form element is disabled
: checked The form is selected (when the radio button is selected)
：：selection 文本选中的时候样式
动态伪类：链接伪类选择器
:link 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
:visited 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
:active 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
：hove 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点
层级选择器：
子选择器： 父元素选择器>子元素选择器 选中只是父元素最近一层的子元素
兄弟元素选择器 元素1+元素2 （同级） 选中元素1同级离得最近的下面的兄弟元素
通用选择器 元素1~元素2 （同级） 选中元素1同级下面的所有元素2
