CSS3笔记（手写超详细）

属性选择器

ul li:first-child {
    /* 选中ul里面的li里面的第一个孩子 */
    height: 20px;
    width: 250px;
    background-color: aquamarine;
    color: #000;
    font-size: 18px;
}
/* 选中ul里面的li里面的最后一个孩子 */
ul li:last-child {
    color: aqua;
}
/* 选中ul里面的li里面的偶数个孩子 */
ul li:nth-child(even) {
    color: red;
}
/* 选中ul里面的li里面的奇数个孩子 */
ul li:nth-child(odd) {
    color: green;
}
ul li:nth-child(2n) {
    color: rgb(180, 127, 28);
}
ul li:nth-child(8) {
    color: rgb(218, 39, 179);
}

伪元素清除浮动

CSS3盒子模型

用途：无论是给盒子添加内边距还是边框都不会撑大盒子，可以直接放在* {}里面

div {
    margin: 200px auto;
    /* 使得盒子上下外边距为200px.左右居中 */
    text-align: center;
    /* 使得盒子中的文本水平居中 */
    border: 10px solid red;
    height: 200px;
    line-height: 200px;
    /* 使得盒子中的内容垂直居中 */
    width: 200px;
    background-color: aqua
}

CSS3其他特性

CSS过渡

口诀：谁做过渡给谁加

div {
    height: 200px;
    width: 400px;
    background-color: springgreen;
    /* transition: 变化的属性 过渡时间 变化曲线 停留时间； */
    transition: width .3s ease 2s;
}
div:hover {
    width: 800px;
}

div {
    height: 200px;
    width: 400px;
    background-color: springgreen;
    /* transition: 变化的属性 过渡时间 变化曲线 停留时间； */
    transition: width .3s ease 2s,height .3s ease 2s;
    /* 如果想要写多个属性，则使用逗号隔开 */
}
div:hover {
    width: 800px;
    height: 400px;

TDK三大标签

CSS3新增选择器

伪元素清除浮动