10-HTML5CSS3①（新增部分、属性/结构伪类/伪元素选择器）

舍予一

已于 2022-03-29 08:54:18 修改

阅读量105

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2021-11-19 15:36:47 首次发布

本文链接：https://blog.csdn.net/hsy0827/article/details/121379012

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML5CSS3①（新增部分、属性/结构伪类/伪元素选择器）

1. 新增语义化标签
2. 多媒体音频标签audio
3. 多媒体视频标签video
4. 新增input标签类型
5. 新增input标签属性
6. CSS3属性选择器
7. 结构伪类选择器
8. 伪元素选择器

1. 新增语义化标签

<header>头部标签
<nav>导航标签
<article>内容标签
<section>块级标签
<aside>侧边栏标签
<footer>尾部标签
（在IE9中会被当成行内元素，所以实际运用时需要添加display:block属性）
在这里插入图片描述

2. 多媒体音频标签audio

格式支持情况如下：

格式	IE9	FireFox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√				√
Wav		√	√		√

参数：

属性	值	描述
autoplay	autoplay	就绪自动播放（Chrome禁用）
controls	controls	播放控件
loop	loop	循环播放
src	url	要播放的音频的url

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

3. 多媒体视频标签video

格式支持情况如下：

格式	IE	FireFox	Opera	Chrome	Safari
Ogg		3.5+	10.5+	5.0+
MPEG4	9.0+			5.0+	3.0+
WebM		4.0+	10.6+	6.0+

参数：

属性	值	描述
autoplay	autoplay	就绪自动播放（Chrome禁用）
controls	controls	播放控件
width	pixels（像素）	播放器宽度
height	pixels（像素）	播放器高度
loop	loop	循环播放
preload	auto预加载；none不预加载	是否预先加载视频（有autoplay属性就忽略该属性）
src	url	要播放的视频的url
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

4. 新增input标签类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	限制用户输入必须为Url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月份类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型
type=“tel”	手机号码
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

5. 新增input标签属性

属性	值	说明
required	required	不能为空，必填
placeholder	提示文本（占位符）	提示信息，存在默认值则不显示
autofocus	autofocus	自动聚焦
autocomplete	off/on	提示之前输入提交成功过的信息，需要有name属性。默认为on。
multiple	multiple	可以多选文件

6. CSS3属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性，且属性值等于val的E元素
E[att^=“val”]	选择具有att属性，且属性值以val开头的E元素
E[att$=“val”]	选择具有att属性，且属性值以val结尾的E元素
E[att*=“val”]	选择具有att属性，且属性值含有val的E元素

类选择器、伪类选择器、属性选择器的权重相同

7. 结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素
E:last-child	匹配父元素中的最后一个子元素
E:nth-child(n)	匹配父元素中的第n个子元素
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

n参数详解： n 可以是数字、关键字、公式

n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算；但是第 0 个元素或者超出了元素的个数会被忽略)

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 20 …
n+5	从第5个开始到最后
-n+5	前5个

nth-child 和 nth-of-type 的区别：

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nth-of-type 选择指定类型的元素

8. 伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

before 和 after 必须有 content 属性
before 在内容前面，after在内容后面
before 和 after 创建的是一个行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器权重一样

伪元素在字体图标中的应用按例

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

舍予一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10-HTML5CSS3①（新增部分、属性/结构伪类/伪元素选择器）

HTML5CSS3①1. 新增语义化标签2. 多媒体音频标签audio3. 多媒体视频标签video4. 新增input标签类型5. 新增input标签属性1. 新增语义化标签<header>头部标签<nav>导航标签<article>内容标签<section>块级标签<aside>侧边栏标签<footer>尾部标签（在IE9中会被当成行内元素，所以实际运用时需要添加display:block属性）2. 多媒体音频标
复制链接

扫一扫

专栏目录