函数篇

attr()

该函数用于获取被选中元素的某个html属性值,返回一个字符串；

div{
    background-color:attr(data-color)
}

<div data-color="red"></div>

函数用于访问CSS自定义属性（css变量）的值； CSS变量的声明以“--”开头--main-color:blue; var()也可以接受可选的第二个参数，作为变量未定义时的默认值；

body{
    color:var(--main-color);
}

它能将网站上某部分原生作为背景图像来使用； element(id),id表示作为背景图像的原生id;

#test{
    background-image:element(#mydiv)
}

为不同的设备像素比提供不同的图像资源；对响应式涉及非常有用； img标签也有srcset属性来实现；

.img{
    background-image:imageset(
        url('1.png') 1x,
        url('2.png') 2x
    )
}

calc用于在css表达式中进行计算功能； min()函数接受两个或更多参数，返回最小值,max则返回最大值；

.element{
    widht:calc(min(50%,300px))
}

使用*来选择全部元素

div * {
    background:"red";
}

使用+来选择紧接在当前元素后面相邻兄弟元素；

.item + div{
    color:"red";
}

使用~来选择之后的所有兄弟元素

.item ~ div{
    color:"red";
}

用于选择当前所有兄弟元素，但不包括第一个元素，常用来在一个容器内元素之间添加间距；

* + * {
    background:"red";
}