css的一些常用属性、函数

在苹果官网：www.apple.com.cn/
，看到的一些css的处理方法，记录一下！

一、CSS :not()选择器

介绍：
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

例子：

html:not(.aos){...} ：为每个html下的并非.aos的类，设置样式

:not(p) { background:red; }
：为每个并非p元素的元素设置背景颜色红色

二、CSS quotes属性

介绍：quotes 属性设置嵌套引用的引号类型。

例子：

样式：q { quotes: '“' '”' "‘" "’"; }

用法：<q>This is a <q>big</q> quote.</q>

说明：quotes一共有4个属性，前两个为最外级引号，后两个为内部引号，上面的代码，输出为：
“This is a ‘big’ quote”.，可以看到，里面会被‘’包住，头尾则用“”包住。

三、CSS calc() 函数

介绍：calc() 函数用于动态计算长度值。

（需要注意的是，运算符前后都需要保留一个空格，例如width: calc(100% - 10px)）

例子：

width: calc(100% - 500px);：当前自适应100%宽度的情况下的宽度px，再减去500px，得到的最终宽度！

四、CSS 变量var()

介绍：var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

例子：
div1和div2背景都设置为红色，:root里定义变量，以–开头命名

:root {
  --main-bg-color: red;
}
 
#div1 {
  background-color: var(--main-bg-color);
}
 
#div2 {
  background-color: var(--main-bg-color);
}
复制代码

五、figure标签

介绍：标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

例子：

<figure>
  <img src="https://juejin.cn/post/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
复制代码