### 结构伪类选择器
- CSS中伪类选择器，比如`:link`、`:visited`、`:hover`、`:active`、`:focus`。
#### 1、
- `E:first-child`、`E:last-child`: 匹配父元素的第一个\最后一个 子元素E。
- `E:nth-child(odd)` 匹配奇数（odd就表示奇数）、- `E:nth-child(even)` 匹配偶数
- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
- `li:nth-child(-n+5)`，则表示**前5个** li。
- `li:nth-last-child(-n+5)`，则表示**最后5个** li。
- `li:nth-child(n+3)`,则表示从第三个开始
#### 2、先在同级里找到所有的E类型，然后根据 n 进行匹配。
- `E:first-of-type`、`E:last-of-type` 匹配同类型中的第一个\最后一个 同级兄弟元素E。
- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。
- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。
#### 3、
- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。
- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。
```css
/* 第一行的前三个 span 标红 */
dt:first-child span:nth-of-type(-n+3) {
color: red;
}
```
### 伪元素选择器
#### 1. `E::before` 、`E::after` ： 是通过 css 模拟出的html标签的效果
```css
/* 伪元素和伪类：一个是位置，一个是状态 */
span{
color: red;
}
span::after{
/* 在内容后面添加东西,最关键的是content:" "
*/
content:" ";
border: 10px solid black;
background-color: green;
}
.one::first-letter{
color: blue;
}
span::before{
content:"天天向上"
}
```
#### 2.
- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
- `E::first-line` 设置元素 E 里面的**第一行**的样式。
- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
```html
span{
<!-- ::first-letter 只适用于块级元素（如 p, div, h1 等），而 <span> 是一个内联元素，需要将 <span> 元素更改为块级元素 -->
display: block;
}
.s1::first-letter{
color: red;
font-size: 50px;
}
p::selection{
<!-- 需要在网页上托拉拽才有效果 -->
background-color: green;
}
<span class="s1">1123456</span>
<p>2222222222222222</p>
```
### 文本
### text-shadow：设置文本的阴影
```javascript
// 参数解释：水平位移 垂直位移 模糊程度 阴影颜色
text-shadow: 20px 27px 22px pink;
```
### 举例：凹凸文字效果
```css
/* 凹进去：给左上角放黑色的阴影，右下角放白色的阴影 */
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
/* 凸出来 */
.tu {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
```
## 盒模型中的 box-sizing 属性:没有继承性,继承性有应用场景
```javascript
// 1. 外加模式：是盒子的总宽高发生变化
box-sizing: content-box;
// 2. 内减模式：改变内容的宽高，盒子的总宽高不变
box-sizing: border-box;
```
## 边框
### 边框圆角：`border-radius` 属性
- 圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
- 属性的写法：
```css
border-radius: 60px; 或者 border-radius: 50%; 四个角的半径都相同时
border-top-left-radius: 60px 120px; 参数解释：水平半径 垂直半径
border-radius: 60px/120px; //参数：水平半径/垂直半径
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
```
```html
border-radius: 100px 0 0 0; 扇形
border-radius: 100px/50px;
border-radius: 10%; 正方形
border-radius: 0 100px; 树叶
<div class="box">1</div>
```
### 边框阴影：`box-shadow` 属性
```javascript
// box-shadow: 水平偏移：正值向右 负值向左。 垂直偏移：正值向下 负值向上。 模糊程度 阴影大小 阴影颜色
border: 1px solid black;
// inset属性，表示内阴影。如果不写，则默认表示外阴影。
box-shadow:0px 217px 17px 5px black inset ;
```
### 边框图片
```javascript
/* 边框图片的路径*/
border-image-source: url("images/border.png");
/* 图片边框的裁剪*/
border-image-slice: 27;
/*图片边框的宽度*/
border-image-width: 27px;
/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;
综合属性：border-image: url("images/border.png") 27/20px round;
```
1. 九宫格：进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：
### 动画效果
#### 过渡：transition
- 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
transition 属性：
1. `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。
- 设置 `transition-property: width`，只让盒子的宽度在变化时进行过渡
2. `transition-duration: 1s;` 过渡的持续时间。
3. `transition-timing-function: linear;` 运动曲线。属性值是：`linear` 线性、`ease` 减速、`ease-in` 加速、`ease-out` 减速、`ease-in-out` 先加速后减速
**综合属性**：
```javascript
// transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
```
### 2D 转换：、缩放、移动、旋转
#### 1、缩放：`scale`：（取值：大于1表示放大，小于1表示缩小。不能为百分比）
```javascript
// transform: scale(x, y); x：水平方向的缩放倍数。y：表示垂直。只写一个值就是等比例缩放。
transform: scale(2, 0.5);
```
### 2、位移：translate(参数为百分比，相对于自身移动)
```javascript
// transform: translate(水平位移, 垂直位移); 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
transform: translate(-50%, -50%);
```
2. 举例：方块页面水平垂直居中
```css
div{
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
}
/* 第一种方法 */
div {
margin-left: -300px; 然后，向左移动宽度（600px）的一半
}
/* 第二种方法 */
div {
transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半
}
```
### 3、旋转：rotate：正值 顺时针；负值：逆时针
```javascript
// transform: rotate(角度);
transform: rotate(45deg);
```
```css
.box{
width: 200px;
height: 200px;
background-color: black;
transition: all 1s;
}
.box:hover{
transform: rotate(3600deg);
}
```
### 4. `transform-origin`:改变旋转的坐标原点
- rotate 旋转时，默认是以盒子的正中心为坐标原点的
```javascript
transform-origin: 50px 50px; // transform-origin: 水平坐标 垂直坐标;
transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
```
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
