新增的表单元素结构伪类选择器

<!-- 我们验证的时候必须添加form表单域 -->
<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="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>

常见输入类型

text password radio checkbox button file hidden submit reset image

新的输入类型

类型很多，我们现阶段重点记忆三个： number tel search

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

E:first-child

匹配父元素的第一个子元素E

 <style>ul li:first-child{background-color: red;}</style><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

E:last-child 则是选择到了最后一个li标签

E:nth-child(n)（★★★）

匹配到父元素的第n个元素

匹配到父元素的第2个子元素

ul li:nth-child(2){}
匹配到父元素的序号为奇数的子元素

ul li:nth-child(odd){} odd 是关键字奇数的意思（3个字母）
匹配到父元素的序号为偶数的子元素

ul li:nth-child(even){} even（4个字母）
匹配到父元素的前3个子元素

ul li:nth-child(-n+3){}

选择器中的 n 是怎么变化的呢？

因为 n是从 0 ，1，2，3.. 一直递增

所以 -n+3 就变成了
- n=0 时 -0+3=3
- n=1时 -1+3=2
- n=2时 -2+3=1
- n=3时 -3+3=0
- ...

一些常用的公式：公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码

常用的结构伪类选择器是： nth-child(n) {...}

E:nth-child 与 E:nth-of-type 的区别

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

<style>ul li:nth-child(2){/* 字体变成红色 */color: red;}ul li:nth-of-type(2){/* 背景变成绿色 */background-color: green;}</style><ul><li>列表项一</li><p>乱来的p标签</p><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

也就是说：

E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

小结

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子
关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式
如果是无序列表，我们肯定用 nth-child 更多
类选择器、属性选择器、伪类选择器，权重为 10

新增的表单元素结构伪类选择器相关推荐

HTML5 CSS3提高 11-01 新增标签及属性表单多媒体结构伪类伪元素过渡小米log jd进度条
HTML5新特性 1.语义化标签 (★★) <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档 ...
CSS基本选择器、层次选择器、结构伪类选择器、属性选择器
目录基本选择器 1.标签选择器 2.类选择器 3.ID选择器层次选择器结构伪类选择器属性选择器基本选择器 1.标签选择器 2.类选择器 3.ID选择器层次选择器选择器类型功能描 ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
css3伪类、表单控件伪类、文本相关伪类、afater清浮动、not选择器、毗邻元素、文字缩略
0804 css3伪类 target 突出显示活动的 HTML 锚 div:target{background: #0e3757;} 表单控件伪类 <style>input:enabled ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
属性选择器、结构伪类选择器、伪元素选择器
选择器一.属性选择器 1.E[att] 作用为:选择具有att属性的E元素. 2.E[att= "val"] 作用为:选择具有att属性,且属性值等于val的E元素:属性等于值. ...
CSS新增的属性、结构伪类选择器，帮你快速找到那个对的人
文章目录前言一.属性选择器二.结构伪类选择器总结前言今天学会了这几个新的选择器会为我们节省很多代码,简化HTML结构,对于起名困难户也会有很大的帮助. 提示:以下是本篇文章正文内容,下面案 ...
CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器选择器功能描述版本 E:last-chi ...

新增的表单元素结构伪类选择器

结构伪类选择器

E:nth-child(n)（★★★）

新增的表单元素结构伪类选择器相关推荐

最新文章

热门文章

新增的表单元素 结构伪类选择器

结构伪类选择器

E:nth-child(n)（★★★）

新增的表单元素 结构伪类选择器相关推荐

最新文章

热门文章

新增的表单元素结构伪类选择器

新增的表单元素结构伪类选择器相关推荐