day20 html5

day20ナレッジ

1.フォームに追加された新しいタイプタイプ:
メールURL URL
番号範囲
範囲カラー
検索

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>   做输出的(计算结果的输出)

次に、CSS属性セレクター:HTML属性セレクター
[属性名] {} を介して対応するタグを選択します。要素に現在のHTML属性値名がある場合、一致は成功します。
セレクター[属性名= "属性値]] {}属性と属性名が正常に一致する場合にのみ選択します。
セレクタ[属性〜=「属性値」] {}現在の属性の属性値は、単語(スペースで区切られた複数の単語)のリストであり、現在指定されている単語が存在する限り、
選択は一致します。文字[属性^ = "文字"] {}は、属性値の開始時に一致します(先頭が一致する限り)。
セレクター[属性$ = ""文字 "]は、属性値の終了時に一致します(終了が一致する限り) OK)
セレクター[属性* =“文字”]属性値にこの文字が含まれている限り、
セレクター[属性| =“文字”]と一致できます。属性値は、現在の文字のみであるか、文字(左コン)で始まります

结构性伪类选择器:通过第几个进行查找
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 {}はルート要素
セレクターを選択します。要素にコンテンツまたは子要素がない場合は、空の{}が選択されます

3. ui要素の疑似クラスstatus
:enabled form要素が利用可能なときに実行されるスタイル
:disabled form要素が無効になっているときに実行されるスタイル
:チェックされているformが選択されている(ラジオボタンが選択されている場合)

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

 动态伪类:链接伪类选择器 
 :link		选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
 :visited		选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
 :active 		选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
 :hove 		选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

 :focus  用户行为选择器     选择匹配的E元素,而且匹配元素获取焦点
 
 层级选择器:
 子选择器:      父元素选择器>子元素选择器 选中只是父元素最近一层的子元素
 兄弟元素选择器  元素1+元素2 (同级) 选中元素1同级离得最近的下面的兄弟元素		
 通用选择器      元素1~元素2 (同级) 选中元素1同级下面的所有元素2		
元の記事を21件公開 ・いい ね0 訪問数279

おすすめ

転載: blog.csdn.net/jiatinghui/article/details/105442384