HTML与CSS学习 day12

• video常见属性
  
• 音频属性
  
• 新增的input属性

<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="month"></li>
            <li>周<input type="week"></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>

• 新增的表单属性
  required="required" 属性不能为空 必填字段
  placeholder="hello world" 表单提示信息 输入文字提示消失
  autofocus="autofocus" 光标自动放到表单里面
  autocomplete="off" on记录搜索记录 off开启无痕
  multiple="multiple" 多个文件一起提交

可以通过以下方式修改提示信息文本的颜色

input::placeholder {
            color: aqua;
        }

• CSS3新增选择器

 input[value] {
            color: blue;
        } 
        
    <input type="text" value="1111">
    <input type="text"> -->

**
（重点）

input[type=text] {
            color: brown;
        }
<input type="text" name="" id="">
    <input type="password" name="" id="">

**

^
div[class^=box] 选定所有box开头的属性的元素
$
div[class$=pp] 选定所有 pp结尾的属性的元素
*
div[class*=box] 选定所有带有box属性的元素

• css新增伪类选择器
  给第一个元素改变属性

:first-child

给最后一个元素改变属性

:last-child 

括号内填几就给第几个改变属性

:nth-child() 

-nth-child(n)
1.n可以是数字，关键字和公式
2.n=even 偶数选择 n=odd 奇数选择
3.n可以是公式
2n 偶数
2n+1 奇数
3n 3 6 9
n+2 代表从第二个开始 包括第二个
-n+3 代表前三个 3 2 1

• div:nth-child(1) 执行的时候先看第一个 然后再看div 如果第一个标签不是div则不起作用

first-of-type 指定类型的第一个
last-of-type 指定类型的最后一个
nth-of-type() 指定类型的第n个

• css伪类选择器
  content=' '; 必写
  在元素前插入内容
  div::before {
  content: ‘hello’;
  }
  在元素后插入内容
  div::after {
  content: ‘hello’;
  }
  伪元素字体图标

   div::after {
            position: absolute;
            top: 5px;
            right: 10px;
            font-family: 'icomoon';
            content: '\e900';
            color: red;
            font-size: 18px;
        }