1. CSS3新特性
1.1 CSS3 新特性介绍
代码效果：鼠标经过图片时图片会变大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world</title>
<style type="text/css">
body {
text-align: center;
}
img {
border-radius: 50%;
/* 过渡效果 0.5秒完成 */
/* transition: all 0.5s; */
/* 因为每个浏览器的渲染都是不同的，需要给属性加一些前缀 */
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
/* 鼠标经过图像鼠标变手势 */
cursor: pointer;
}
img:hover {
/* 鼠标经过图像，图像会缩放1.1倍 */
transform: scale(1.1);
}
</style>
</head>
<body>
<img src="../img/1.png" alt="哆啦A梦">
</body>
</html>
1.2 新特性简介和浏览器支持情况
2.1 新特性简介
- 强大的CSS3选择器
- 抛弃图片的视觉效果
- 盒模型变化(多列布局和弹性盒模型)
- 阴影效果
- Web字体 和 web Font图标
- CSS3过渡与动画交互效果
- 媒体查询
2.2 浏览器支持情况
网站查询浏览器对 CSS3 的支持情况
https://caniuse.com/
2.3 渐进增强和优雅降级
- 渐进增强
- 一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
- 优雅降级
- 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
2. 伪类选择器，伪元素
2.1 CSS3 伪类选择器
2.1.1 动态伪类选择器
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| ：link | a：link | 未访问过的a链接 |
| ：visited | a：visited | 访问过的a链接 |
| ：hover | div：hover | 鼠标移入div时的效果 |
| ：active | div：active | 鼠标点击div时的效果 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pasudo classes</title>
<style type="text/css">
a {
font-size: 30px;
}
/* 设置a对象在未被访问前的样式表属性 */
a:link {
color: yellow;
}
/* 选择器设置访问过的页面链接的样式 */
a:visited {
color: crimson;
}
/* 选择器当有鼠标悬停在其上的链接样式 */
a:hover {
color: burlywood;
}
/* 选择器设置当你点击链接时的样式 */
a:active {
color: chartreuse;
}
</style>
</head>
<body>
<a href="">Pasudo classes</a>
</body>
</html>
2.1.2 UI元素状态伪类选择器
input：enabled 匹配所有用户界面（form表单）中处于可用状态的 input 元素
input：disabled 匹配所有用户界面（form表单）中处于不可用状态的 input 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 可用 */
input:enabled {
background-color: aquamarine;
}
/* 不可用 */
input:disabled {
background-color: blanchedalmond;
}
</style>
</head>
<body>
<input type="text" name="" id="">可用
<input type="text" name="" id="" disabled>不可用
</body>
</html>
2.1.3 结构伪类选择器
1
:first-child：选择某个元素的第一个子元素
:last-child：选择某个元素的最后一个子元素
:nth-child(数字或者表达式)：选择某个元素的一个或多个特定的子元素 括号可以写数字或者表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.clearfix {
clear: both;
overflow: auto;
}
.demo {
border: 1px solid #ccc;
width: 300px;
margin: 50px auto;
padding: 10px;
}
.demo li {
float: left;
list-style: none;
padding: 2px;
border: 1px solid #ccc;
margin-right: 4px;
width: 20px;
}
.demo a {
display: block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 10px;
background-color: #f36;
text-decoration: none;
}
/* 选择某个元素的第一个子元素 */
.div1 li:first-child {
background-color: #0f0;
}
/* 选择某个元素的最后一个子元素 */
.div1 li:last-child {
background-color: rgb(0, 255, 247);
}
/* 选择某个元素的一个或多个特定的子元素 括号可以写数字或者表达式 */
.div1 li:nth-child(3) {
background-color: goldenrod;
}
</style>
</head>
<body>
<div class="demo clearfix div1">
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
</body>
</html>
2
:nth-child(数字或者表达式)：选择某个元素的一个或多个特定的子元素 括号可以写数字或者表达式
| 代码 | 操作 |
|---|---|
| :nth-child(n) | 全选操作 |
| :nth-child(2n) | 隔行操作 偶数 |
| :nth-child(even) | 隔行操作 不用表达式 偶数 |
| :nth-child(2n+1) | 隔行操作 奇数 |
| :nth-child(odd) | 隔行操作 不用表达式 奇数 |
| :nth-child(n+5) | 从第五个开始 |
| :nth-child(4n+1) | 每隔三个操作一个元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.clearfix {
clear: both;
overflow: auto;
}
.demo {
border: 1px solid #ccc;
width: 300px;
margin: 50px auto;
padding: 10px;
}
.demo li {
float: left;
list-style: none;
padding: 2px;
border: 1px solid #ccc;
margin-right: 4px;
width: 20px;
}
.demo a {
display: block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 10px;
background-color: #f36;
text-decoration: none;
}
/* 全换色 */
.div1 li:nth-child(n) {
background-color: green;
}
/* 隔行换色 偶数 */
.div2 li:nth-child(2n) {
background-color: green;
}
/* 隔行换色 不用表达式 偶数 */
.div3 li:nth-child(even) {
background-color: green;
}
/* 隔行换色 奇数 */
.div4 li:nth-child(2n+1) {
background-color: green;
}
/* 隔行换色 不用表达式 奇数 */
.div5 li:nth-child(odd) {
background-color: green;
}
/* 从第五个开始 */
.div6 li:nth-child(n+5) {
background-color: rgb(11, 0, 128);
}
/* 每隔三个变一个 */
.div7 li:nth-child(4n+1) {
background-color: rgb(11, 0, 128);
}
</style>
</head>
<body>
<div class="demo clearfix div1">全换色
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div2">隔行换色 偶数
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div3">隔行换色 不用表达式 偶数
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div4">隔行换色 奇数
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div5">隔行换色 不用表达式 奇数
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div6">n+5 从第五个开始变色
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div7">4n+1 每隔三个变一个
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
</body>
</html>
3
:nth-last-child(数字或表达式)：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:nth-child(数字或表达式)：选择某个元素的一个或多个特定的子元素，不指定子元素类型，有其他的元素类型也算入其中
:nth-of-type(数字或表达式)：选择某个元素的一个或多个特定的子元素，指定子元素类型，有其他的元素类型不算入其中
:nth-last-of-type(数字或表达式)：选择指定的元素，从元素的最后一个开始计算，有其他的元素类型不算入其中
:first-of-type：选择一个上级元素下的第一个同类子元素
:last-of-type：选择一个上级元素下的最后一个同类子元素
:only-child：选择的元素是它的父元素的唯一一个子元素
:empty：选择的元素里面没有任何内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.clearfix {
clear: both;
overflow: auto;
}
.demo {
border: 1px solid #ccc;
width: 300px;
margin: 50px auto;
padding: 10px;
}
.demo li {
float: left;
list-style: none;
padding: 2px;
border: 1px solid #ccc;
margin-right: 4px;
width: 20px;
}
.demo a {
display: block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 10px;
background-color: #f36;
text-decoration: none;
}
/* 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算 */
.div1 li:nth-last-child(3) {
background-color: goldenrod;
}
/* 选择第三个子元素 不指定子元素类型 */
.div2 li:nth-child(3) {
background-color: brown;
}
/* 选择第三个子元素 指定子元素类型 */
.div3 li:nth-of-type(3) {
background-color: brown;
}
/* 选择指定的元素，从元素的最后一个开始计算 */
.div4 li:nth-last-of-type(3) {
background-color: brown;
}
/* 选择一个上级元素下的第一个同类子元素 */
.div5 li:first-of-type {
background-color: cadetblue;
}
/* 选择一个上级元素下的最后一个同类子元素 */
.div5 li:last-of-type {
background-color: green;
}
/* 选择的元素是它的父元素的唯一一个子元素 */
.div6 li:only-child {
background-color: blue;
}
/* 选择的元素里面没有任何内容 */
.div7 li:empty {
background-color: black;
}
</style>
</head>
<body>
<div class="demo clearfix div1">
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div2">不指定子元素类型
<ul class="clearfix">
<p>0</p>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div3">指定子元素类型
<ul class="clearfix">
<p>0</p>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div4">最后一个开始算起 指定子元素类型
<ul class="clearfix">
<p>0</p>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<p>0</p>
</ul>
</div>
<div class="demo clearfix div5">
<ul class="clearfix">
<p>0</p>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix div6">有唯一一个子元素
<ul class="clearfix">
<li><a href="">1</a></li>
</ul>
</div>
<div class="demo clearfix div6">没有唯一一个子元素
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
</ul>
</div>
<div class="demo clearfix div7">父元素里的子元素是空的
<ul class="clearfix">
<li></li>
</ul>
</div>
<div class="demo clearfix div7">父元素里的子元素是空的
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
2.2 什么是伪元素？
csS伪元素用于向某些选择器设置特殊效果
| 伪元素 | 作用 |
|---|---|
| :first-letter | 将特殊的样式添加到文本的首字母 |
| :first-line | 将特殊的样式添加到文本的首行 |
| :before | 在某元素之前插入某些内容 |
| :after | 在某元素之后插入某些内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素</title>
<style type="text/css">
.demo {
border: 1px solid #ccc;
width: 300px;
margin: 50px auto;
padding: 10px;
}
/* 选择首个字 */
.demo::first-letter {
font-size: 40px;
font-weight: bold;
float: left;
}
/* 选择首行 */
.demo::first-line {
color: #f00;
}
.demo01 {
width: 300px;
border: 1px solid #ccc;
margin: 10px auto;
padding: 10px;
text-align: center;
}
/* 在div之前插入图片 */
.demo01::before {
content: url(../img/1.png);
display: block;
}
/* 在div之后插入图片 */
.demo01::after {
content: url(../img/6.png);
display: block;
}
</style>
</head>
<body>
<div class="demo">
哆啦A梦是一只来自未来世界的猫型机器人，
用自己神奇的百宝袋和各种奇妙的道具帮助大雄解决各种困难。
哆啦A梦的故事将人们带进一个奇妙、充满想像力的世界。
</div>
<div class="demo01">
哆啦A梦
</div>
</body>
</html>
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
