伪类和伪元素 , 轮播 , 媒体查询

一 伪类和伪元素

1.
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标划过链接 /
a:active / 已选中的链接 */
注意：

(1)在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
(2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
（3）伪类的名称不区分大小

2.
(1)irst-child :选择第一个子元素
(2)first-of-type:选择元素中指定类型
(3)last-child:选择所有p元素的最后一个子元素
(4)last-of-type:选择每个p元素是其母元素的最后一个p元素
(5)nth-child():选中指定第几个的子元素

注：

• ()中可填变量
• 2n:偶数 == even
• 2n+1:奇数行 == odd

3.伪元素
（1） first-line：伪元素中的样式对 p 元素的第一行文本进行格式化

注意："first-line、first-letter" 伪元素只能用于块级元素。

（2）first-letter：伪元素用于向文本的首字母设置特殊样式
（3）before：伪元素可以在元素的内容前面插入新内容
(4)after: 伪元素可以在元素的内容之后插入新内容

二 、轮播

实现图片轮播

1、 有相同大小的多个图片
2、 将展示图片横排放在一个图片容器里面
3、在图片容器外再加一个展示容器，展示容器大小为图片大小
4、给图片容器添加自定义动画，在动画不同阶段设置递增的偏移值

注意：

• 动画效果分为切换和停l留
• 自定义动画阶段与图片数量相关
• 动画各阶段偏移值与图片大小相关

CSS部分

#container {
	width: 500px;
	height: 300px;
	overflow: hidden;
}
#picture {
	width: 1500px;
	animation: switch 5s ease-out infinite;
}
#picture > img {
	float: left;
	width: 400px;
	height: 300px;
}
@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

HTML部分

<div id="contain">
    <div id="picture">
        <img src="p1.png" />
        <img src="p2.png" />
        <img src="p3.png" />
    </div>
    </div>

三、媒体查询

方法： link标签引入：media属性（eg：引入（screen）彩色屏幕显示，并且最大宽度不超过800px时候的CSS样式）

<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">

1、媒体类型(media type) ：常用all，screen，print。
2、逻辑操作符 and：合并多个媒体属性
eg：@media screen and (min-width: 600px) and (max-width:100px)

注：合并多个媒体属性或合并媒体属性与媒体类型, 一个基本的媒体查询，即一个媒体属性与默认指定的screen媒体类型

四、transform中的scale

scale缩放转换：

1、使用方法：transform:scale(值)，他的值是指定的缩放倍率，比如0.5就是缩放50%，1就是缩放100%，1.5就是缩放150%；

2、可能的值：
（1）scale(x,y)使元素X轴和Y轴同时缩放；
（2）scale(x)使元素仅X轴缩放；
（3）scale(y)使元素仅Y轴缩放；