html手机表单选择器,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 代码

```

3. 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;

}

阅读

• 小说
• 散文
• 古诗

```

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

选择处于焦点的元素