HTML基础:表单，选择器，伪类

智能表单

input表单元素	效果
email	必须输入email元素
date	必须输入日期类型
number	输入数字类型，min最小值，max最大值，step间距
range	滑动条
color	生成一个颜色选择表单
submit	提交
required	内容不能为空
pattern	正则表达式

2. 做一个搜索框

```
css代码
.div-search{
           width: 550px;
           height: 35px;
           border: solid burlywood 1px;
           font-size: 1.1em;
       }
       .input-search{
           width: 500px;
           height: 35px;
           outline: none;
           border: none;
       }
       div{
           float: left;
       }
       .div-camera{
           width: 35px;
           height: 32px;
           background: url("相机.svg");
           background-repeat: no-repeat;
          position: relative;
           left: -35px;
       }
       .div-camera:hover{
           background: url("相机 (1).svg");
           background-repeat: no-repeat;
       }

html 代码
    <div class="div-search"><input type="search" class="input-search" placeholder="超级新品日"></div>
    <div class="div-camera"></div>
```

3. datalist标签

```
<datalist id="list_hobby">
    <option id="read">阅读</option>
    <option value="sleep">睡觉</option>
    <option value="sport">运动</option>
</datalist>
```

4. 元素的隐藏和实现

```
 ul,li{
        list-style: none;
        padding: 0;
        margin: 0;
    }
.li-read{
    width:80px;
    height:50px;
    line-height:50px;
    background: #39a8ff;
}
.inner-nav{
    width:80px;
    height:90px;
    display:none;/*设置为隐藏*/
    background: gray;
}
.li-read:hover .inner-nav{
    display:block;
}
<li class="li-read">阅读
    <ul class="inner-nav">
        <li>小说</li>
        <li>散文</li>
        <li>古诗</li>
    </ul>
</li>
```

5. 属性选择器

属性选择	作用
[id^=’book00’]	选择id以’book00’开头的
[id=’book001’]	选择id为’book001’的
[id$=’10’]	选择id以’10’为结尾的
[id*=’book’]	选择id中国含有’book’的
li[id]	选择有id属性的li

6. 兄弟选择器

```
.div01+div /*选择与div01相邻的div*/
.div01~div/*选择与div01同级的div*/
```

7. after,before(在选择元素之后、之前插入元素）

```
.div01{
    width:50px;
    height:50px;
}
.div01:after{
    content:"";
    width:50px;
    height:50px;
    display:block;
    position:relative;
    left:50px;
}
/*结构层只需要写一个div，after会随着主div移动而移动*/
```

8. UI伪类，表单内才可以实现

```
p::selection{
    color:red;
}
/*让选中的文字变为红色*/
input[type='email']:invalid{
    color:red;
}
/*不符合条件时为红色*/
```

9. 结构伪类

选择器类型	作用
div:first-child	选择第一个子元素
div:nth-child(3)	选择第三个子元素
div:nth-last-child(1)	选择倒数第一个子元素
div:nth-child(2n+1)	选择奇数的子元素
：enabled	选择处于启用状态的子元素
：disabled	选择处于禁用状态的子元素
：checked	选择选择状态的元素
:default	选择处于默认状态的元素
：focus	选择处于焦点的元素

HTML基础:表单，选择器，伪类

猜你喜欢