1. HTML5的新特性
目录
nth-child(n):选择某个父元素的一个或多个特定的子元素
1.1 HTML5新增的语义化标签
- <header>：头部标签
- <nav>：导航标签
- <article>：内容标签
- <section>：定义文档某个区域
- <aside>：侧边栏标签
- <footer>：尾部标签
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
1.2 HTML5新增的多媒体标签
1. 视频<video>:MP4
语法：<video src="文件地址" controls="controls"></video>
常见属性：
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4" autoplay="autoplay" controls="controls" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
</body>2. 音频<audio>:MP3
语法：<audio src="文件地址" controls="controls'></audio>
属性：谷歌浏览器把音频和视频的自动播放禁止了
1.3 新增的input类型
可以通过设置方式修改placeholder的字体颜色：
input::placeholder {
color:red;
}
2. CSS3的新特性
2.1 属性选择器
- 类选择器、属性选择器、伪类选择器的权重都是10
<style>
/* 1.属性选择器[属性]
选择具有value属性的input选择器
*/
/* input[value] {
color: red;
} */
/* 2.属性选择器[属性=值]
选择具有type=text的input选择器
*/
/* input[type="text"] {
color: red;
} */
/* 3.属性选择器[属性^=值]
选择具有class属性并且属性的值以icon开头的div选择器
*/
div[class^="icon"] {
color: green;
}
/* 4.属性选择器[属性值$=值]
选择具有class属性并且属性的值以data结尾的section选择器
*/
section[class$="data"] {
color:#0000ff;
}
/* 5.属性选择器[属性值*=值]
选择具有class属性并且属性的值有no的span选择器
*/
span[class*="no"] {
color: skyblue;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助类选择器或者id选择器 -->
<!-- <input type="text" value="请输入">
<input type="text"> -->
<!-- 2.属性选择器还可以选择 属性=值 的某些元素 -->
<input type="text">
<input type="password">
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">第1</div>
<div class="icon2">第2</div>
<div class="icon3">第3</div>
<div class="icon4">第4</div>
<div>wuwuwuwuwuwu</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">icon1</section>
<section class="icon2-data">icon2</section>
<section class="icon3-icon">icon3</section>
<!-- 5.属性选择器可以选择某些具有的属性值的某些元素 -->
<span class="icon-no.1">icon1</span>
<span class="icon-no.2">icon2</span>
<span class="icon-icon3">icon3</span>
</body>显示的效果如图所示：
2.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用语根据父级选择器里面的子元素
nth-child(n):选择某个父元素的一个或多个特定的子元素
会把所有的盒子都排序号，执行的时候先看nth:child(n)，然后再看前面的选择器制定的元素是否对应
- n可以是数字、关键字和公式
- 数字：选择第n个子元素
- 关键字：even偶数，odd奇数
- 公式：从0开始计算，超出了元素的个数会被忽略
<style>
/* 1.选择第一个子元素，即第一个li */
ul li:first-child {
background-color: pink;
}
/* 2.选择最后一个子元素，即最后一个li */
ul li:last-child {
background-color: pink;
}
/* 3.选择第n个子元素 */
/* nth-child(n)，n可以是数字，关键字或者是公式 */
/* ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(4) {
background-color: skyblue;
} */
/* 1)把所有的偶数 even的孩子选取出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2）把所有的奇数 odd的孩子选取出来 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3）从0开始，每次加1，相当于选择了所有的孩子 */
ol li:nth-child(n) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<li>第6个孩子</li>
<li>第7个孩子</li>
<li>第8个孩子</li>
</ul>
<ol>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<li>第6个孩子</li>
</ol>
</body>显示的效果如图：
nth-of-type
会把指定元素的盒子排列序号，执行的时候先看选择器指定的元素，然后再看序号
<style>
/* 先把ul里面的li排序，然后再执行 */
ul li:nth-of-type(n) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<p>段落</p>
<li>li的第1</li>
<li>li的第2</li>
</ul>
</body>显示的效果如图：
2.3 伪元素选择器
- before和after创建一个元素，都是属于行内元素
- 新创建的这个元素在文档书中是找不到的，所以称之为伪元素
- 语法：element::before{}
- before和after必须有content属性
- before在父元素内容的前面创建于元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
1. 字体图标
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
color: red;
font-family: 'icomoon';
/* content: ''; */
content: '\ea3c';
}
</style>
</head>
<body>
<div></div>
</body>显示的效果如下：
2. 仿土豆效果
<style>
.tudou {
position: relative;
width: 450px;
height: 280px;
margin: 0 auto;
background-color: pink;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
position: absolute;
left: 0;
top: 0;
content: '';
/* 隐藏显示 */
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
.tudou:hover::before {
/* 通过before里面的元素显示出来 */
/* 鼠标点击的时候显示 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>显示的效果如下：
3. 伪元素清除浮动
2.4 CSS3盒子模型
通过box-sizing来指定盒模型，有2个值：content-box、border-box
- box-sizing: content-box; 盒子大小为：width+padding+border
- box-sizing: border-box; 盒子大小为：width，不会撑大盒子
2.5 CSS3函数
2.6 CSS3过渡
过渡动画：是从一个状态渐渐地过渡到另外一个状态，经常和:hover一起使用
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* transition:要过渡的属性 花费的时间 运动曲线 何时开始； */
/* transition: width 1s ease 1s; */
/* transition: width 1s,height 1s; */
transition: all 1s ease .5s;
}
div:hover {
width: 400px;
height: 400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
3614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
