文章目录
一、CSS3新增选择器
1、属性选择器
注意：类选择器、属性选择器、伪类选择器，权重为10
2、结构伪类选择器
<style>
ul li:first-child {
background-color: green;
}
ul li:last-child{
background-color: hotpink;
}
ul :nth-child(4){
background-color: yellow;
}
</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>
</body>
结果如下：
nth-child(n)选择某个父元素的一个或多个特定的父元素
- n可以是数字，关键字或公式
- n如果是数字，就选择第n个子元素，里面数字从1开始
- n可以是关键字：even偶数，odd奇数
- 0可以是公式：常见的公式如（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
nth-child和nth-of-type的区别
- nth-child会把所有的盒子都排列序号，先找到第n个孩子，然后看看是否和E匹配
- nth-of-type会把指定元素的盒子排列序号，先去匹配E，然后再根据E找第几个孩子
3、伪元素选择器（敲重点！！！）
伪元素选择器可以帮助我们利用CSS创建标签元素，而不需要HTML标签，从而简化HTML结构
element::before 在元素内部的前面插入内容
element::after 在元素内部的后面插入内容
- before和after创建一个元素，属于行内元素
- 新创建的这个元素在文档中是找不到的，so我么称为伪元素
- before和after必须有content属性
- 伪元素选择器和标签选择器一样，权重为1
1、 伪元素清除浮动
生成一个新的行内元素，转换为块级元素，再隐藏元素
二、CSS3盒子模型border-box
通过box-sizing指定模型，有两个值为：content-box、border-box
box-sizing:content-box //盒子大小为width+padding+border
box-sizing:border-box //盒子大小为width,padding和border就不会撑大盒子了
三、图片模糊处理
filter:blur(5px) //blur模糊处理，数值越大图像越模糊
四、计算盒子宽度calc函数
width:calc(100%-30px) //子盒子比父盒子宽度小30px，括号里+、—、*、/都可以计算
五、CSS过渡（敲重点！！！）
过渡动画：是一个状态渐渐过渡到另外一个状态
经常和:hover一起搭配使用
谁做过渡给谁加！！！
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是s（必须写单位）
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触时间，默认是0s（可以省略）
2997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
