CSS3

1658字约6分钟

2024-12-02

新增的CSS3会有兼容性问题，ie9+才支持
移动端的支持度由于PC端

属性选择器

不需要借助类或者id来修饰代码

/*修饰input中有value的代码*/
input[value] {
    color: pink;
}

<input type="text" value="请输入">
<input type="text">

/*修饰input中有value=text的代码*/
input[type=text] {
    color: pink;
}

<input type="text" name="" id="">
<input type="password" name="" id="">

/*修饰div，且class值是ico开头的代码*/
div[class^=ico] {
    color: pink;
}

<div class="ico1">1</div>
<div class="ico2">2</div>
<div class="ico3">3</div>
<div class="ico4">4</div>
<div>cs3</div>

/*修饰div，且class值是jie结尾的代码*/
div[class$=jie] {
    color: pink;
}

<div class="ico1-jie">1</div>
<div class="ico2-jie">2</div>
<div class="ico3-jie">3</div>
<div class="ico4-jie">4</div>
<div>cs3</div>

/*修饰div，且class值中包含的有o*/
div[class*=o] {
    color: pink;
}

<div class="ico1-jie">1</div>
<div class="ico2-jie">2</div>
<div class="ico3-jie">3</div>
<div class="ico4-jie">4</div>
<div>cs3</div>

类选择器，属性选择器和伪类选择器的权重都是10

/* 权重为元素选择器（div）1  + 属性选择器 10 = 11 */
div[class*=o] {
    color: pink;
}

/* 权重为10 */
.ico1-jie {
    color: skyblue;
}

结构伪类选择器

/* 修饰ul标签中的第一个li标签 */
ul li:first-child {
    color: skyblue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

/* 修饰ul标签中的最后一个li标签 */
ul li:last-child {
    color: skyblue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

在 :nth-child(n) 中 n 表示数字，关键字或者公式
修饰所有偶数项时，n为even，奇数项时n为odd

/* 修饰ul标签中的第3个li标签 */
ul li:nth-child(3) {
    color: skyblue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

/* 修饰ul标签中的偶数个li标签 */
ul li:nth-child(even) {
    color: skyblue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15...
n+5	第5个之后（包含第5个）
-n+5	第5个之前（包含第5个）

/* 修饰ul标签中所有li标签 */
ul li:nth-child(n) {
    color: skyblue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

/* 修饰ul标签中第3个li标签之后的li标签
且包括第3个li标签*/
ul li:nth-child(n+3) {
    color: skyblue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child和:nth-of-type的区别

:nth-child是修饰第一个元素没错，但如果第一个元素和css中所写的元素不一样，则不会修饰
:nth-of-type是修饰第1个css中所写的那个元素，

如下：css中修饰的是li标签，但在 ul 标签中第一个标签是 p，而css中所修饰的是li，所以与css中的代码不符，:nth-child 则不生效；

因为在 ul 标签中第一个标签是 p，所以对于:nth-of-type而言，第1个 li 标签是 <li>2</li> ，所以 <li>2</li> 正常修饰

ul li:nth-child(1) {
    color: skyblue;
}

<ul>
    <p>1</p>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul li:nth-of-type(1) {
    color: skyblue;
}

<ul>
    <p>1</p>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

伪元素

选择器	简介
`::before`	在元素内部前面添加内容
`::after`	在元素内部后面添加内容

::before 和 ::after 创建的元素属于行内元素
伪元素创建的元素在html中是找不到的
::before 和 ::after 中必须有 content 属性
伪元素和标签选择器一样权重都为 1
伪元素相当于是一个元素，但是在html中是找不到的

div {
    position: relative;
    width: 150px;
    height: 30px;
    border: 2px solid skyblue;
}

div::after {
    position: absolute;
    top: 10%;
    right: 9px;
    content: '>';
}

<div></div>

视频灰蒙版

.a {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 300px auto;
}

.a img {
    width: 100%;
    height: 100%;
}

.a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: #00000042 url("向上.png") no-repeat center;
}

.a:hover::before {
    display: block;
}

<div class="a">
    <!-- 灰蒙版 -->
    <img src="image.jpg">
</div>

盒子模型

以前，我们给盒子设置边框粗细时，往往会撑大盒子，所以为了解决这个方法，可以使用 box-sizing 属性来设置

其属性值：

content-box（默认，盒子大小为width + padding + border）
border-box 盒子最终大小就为width（注意：padding和border的大小不能超过盒子的大小）

图片模糊

filter 后面接函数，而blur();函数的作用是图片模糊显示

blur 数值越大越模糊，单位是 px

img {
	filter: blur(5px);
}

<img src="image.jpg">

calc函数

此函数可以执行一些计算

div {
    width: 800px;
    height: 400px;
    background-color: pink;
    margin: 200px auto;

}

span {
    display: inline-block;
    /* 加减乘除都可以计算 */
    /* 宽度为 总宽度 减去 150px */
    width: calc(100% - 150px);
    height: 30px;
    background-color: orange;
}

<div>
    <span></span>
</div>

过渡动画

可以从一个状态慢慢进入到另一个状态

虽然低版本浏览器不支持该属性，但是不会影响页面的布局

transition: 属性 动画花费时间 运动曲线 什么时候开始;

属性：就是我们要变化哪个属性就写哪个属性，如果要变化所有属性，直接使用 all
动画花费时间：从当前属性变化到你规定的那个属性所持续的时间，且必须要有单位 s
运动曲线（可以不写）：linear（匀速变化），ease （逐渐变慢，默认），ease-in（加速），ease-out（减速），ease-in-out（先加速在减速）
什么时候开始（可以不写）：默认为0s，且必须要有单位 s

div {
    width: 800px;
    height: 400px;
    background-color: pink;
    margin: 200px auto;
}

span {
    display: inline-block;
    width: 500px;
    height: 30px;
    background-color: orange;
    /* 要让哪个标签变化有动画就写在哪个标签上，这样当鼠标经过该标签时时就会有动画了 */
    /* 注意要设置:hover伪类 */
    /* transition: 属性 动画花费时间 运动曲线 什么时候开始; */
    transition: all 0.5s ease-in 0s;
}
/* 要让哪个标签变化有动画就写在哪个标签上，这样当鼠标经过该标签时时就会有动画了 */
span:hover {
    width: 200px;
    height: 300px;
    background-color: skyblue;
}

<div>
    <span></span>
</div>