HTML5+CSS3选择器

电玩女神 2022-04-11 12:17 296阅读 0赞

## 一、HTML5的认识 ##

HTML5相较于HTML4进行了升级，比HTML4语义化更明确，新增了一些标签，同时也废除了一些元素旧的标签。

### 1.HTML5新增的语义化结构元素 ###

header表示一个页面中一个内容区块或整个页面的标题即页面顶部的内容。

footer表示整个页面或页面中一个内容区块的脚注即页面底部的内容。

section表示页面中的一个内容区块，可与h1、h2等元素结合使用，表示文档结构。

article表示一个页面中的一块与上下文不相关的独立内容。常用于定义侧边栏内容即定义独立于网页的内容，在手机网页中经常用到。

aside表示定义页面之外的内容即声明主内容之外的内容。

nav表示页面中导航链接的部分。

main表示页面的主要内容。

figure表示一段独立的内容流，一般表示文档主体流内容的一个独立单元。

time表示声明时间。

progress表示HTML5中的默认精度条，其样式不能进行更改。

### 2.HTML5中新增的表单元素 ###

datalist：其作用类似于<select name=”  ” id=”  ”></select>，表示在文本框中输入会出现下拉索引。

</datalist>

常与input搭配使用。

form：<form method=”  ”></form>，表示表单验证。其中method中的属性包括get和post，get提交数据大，不太安全（get在注册后会将相关信息显示在网址上），post提交的数据少，较安全。

tel：格式<input type=”tel”/>，表示输入电话号码的文本框。

search：格式<input type=”search”/>，表示搜索的文本框。

url：格式<input type=”url”/>，表示输入URL地址的文本框。

email：格式<input type=”email”/>，表示输入电子邮件地址的文本框。

datetime：格式<input type=”datetime”/>，表示日期和时间的文本框。

date：格式<input type=”date”/>，表示日期的文本框。

month：格式<input type=”month”/>，表示月份的文本框。

week：格式<input type=”week”/>，表示周几的文本框。

time：格式<input type=”time”/>，表示时间的文本框。

datetime-local：格式<input type=”datetime-local”/>，表示本地日期和时间的文本框。

number：格式<input type=”number”/>，表示数字的文本框。

range：格式<input type=”range”/>，表示范围的文本框，可理解为文本框的进度条。

color：格式<input type=”color”/>，表示颜色的文本框。

file：格式<input type=”file”/>，表示文件上传管理器的文本框。

### 3.HTML5 中一些与JavaScript相关的标签 ###

视频标签<video src=”  ”  autoplay controls loop></video>

音频标签<audio src=”  ”  autoplay controls loop></audio>

其中src中填入的是视频或音频的存放路径，autoplay表示自动播放，controls表示播放进度条控制器，loop表示循环播放。

画布标签<canvas></canvas>

## 二、CSS3选择器 ##

在学习HTML的时候，我们初步接触了几个CSS选择器，在CSS3中，这些选择器可以继续沿用，同时还增加了一些选择器。

### 1.基本选择器 ###

\*  通用元素选择器，匹配任何元素。

E  标签选择器，匹配所有使用E 标签的元素。

.info  class选择器，匹配所有class属性中包含info属性的元素

\#info  id选择器，匹配所有id属性等于info的元素。

### 2. 组合选择器 ###

E,F  多元素选择器，同时匹配所有E 元素和F元素，E和F中间用逗隔开。

E F  后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格隔开。

E>F  子元素选择器，匹配所有E 元素的子元素F 。

E+F  毗邻元素选择器，匹配所有紧随E 元素之后的同级元素F。

### 3.CSS2.1属性选择器 ###

E\[att\]  匹配所有具有att属性的E元素。

E\[att=val\]  匹配所有att属性等于”val”的E 元素

E\[att~=val\]  匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E 元素

E\[att|=val\]  匹配所有att属性具有多个连字号分隔的值、其中一个值以”val”开头的E 元素。

### 4.CSS2.1伪类选择器 ###

E:first-child  匹配父元素的第一个子元素

E:link  匹配所有未被单击的链接。

E:visited  匹配所有已被单击的链接。

E:active  匹配鼠标已经在其上按下、还没有释放的E 元素。

E:hover  匹配鼠标悬停其上的E 元素。

E:focus  匹配获得当前焦点的E 元素。

E:lang(c)  匹配lang属性等于c 的E 元素。

### 5.CSS2.1伪元素选择器 ###

E:first-line  匹配E 元素的第一行。

E:first-letter 匹配E 元素的第一个字母。

E:before  在E 元素之前插入生成的内容。

E:after  在E 元素之后插入生成的内容。

E~F  匹配任何在E 元素之后的同级子元素。

### 6.CSS3属性选择器 ###

E\[att^=”val”\]  属性att的值以”val”开头的元素。

E\[att$=”val”\]  属性att的值以”val”结尾的元素。

E\[att\*=”val”\]  属性att的值包含”val”字符串的元素。

### 7. CSS3用户界面伪类选择器 ###

E:enabled  匹配表单中激活的元素。

E:disabled  匹配表单中禁用的元素。

E:checked  匹配表单中被选中的radio（单选按钮）或checkbox（复选框）元素。

E:selection  匹配用户当前选中的元素。

### 8. CSS3结构性伪类选择器 ###

E:root  匹配文档的根元素。

E:nth-child(n)  匹配其父元素的第n个子元素，括号里填写数字。

E:nth-last-child(n)  匹配其父元素的倒数第n个子元素，括号里填写数字。

E:nth-of-type(n)  与nth-child()作用类似，但只匹配使用同种标签的元素。

E:nth-last-of-type(n)  与nth-last-child()作用类似，但只匹配使用同种标签的元素。

E:last-child  匹配父元素的最后一个子元素，等同于nth-last-child(1)

E:first-of-type  匹配父元素下使用同种标签的第一个元素，等同于nth-of-type(1)。

E:last-of-type  匹配父元素下使用同种标签的最后一个元素，等同于nth-last-of-type(1)。

E:only-child  匹配父元素下仅有的一个子元素。

E:only-of-type  匹配父元素下使用同种标签的唯一一个子元素。

E:empty  匹配一个不包含任何子元素的元素。

### 9. CSS3反选伪类选择器 ###

E:not(s)  匹配不符合当前选择器的任何元素。

### 10. CSS3的:target伪类选择器 ###

E:target  匹配文档中特定“id”单击后的效果。

## 三、CSS3中和border有关的样式 ##

border:20px solid red;表示边框线为20个像素，格式为线条，颜色为红色。

border-image: url("./img/1.jpg") round;表示插入图片。

box-shadow:-10px -10px 20px pink;表示设置阴影层，数字依次指阴影往下距离，往右距离，阴影大小，最后一个设置阴影的颜色。

border-radius:10px;表示定义圆角。若值为50%，则将整个框架设置成为圆形。

box-sizing: border-box;用来设置框架的布局。有三个属性（1）content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。（2）border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（3）inherit规定应从父元素继承 box-sizing 属性的值。