个人前端笔记-CSS3新特性部分标签

文章目录[隐藏]

• css3 变量：

css3 变量：

1):变量的声明：必须以–开头，

全局声明：声明一个全局变量--bgcolor; :root 可以设置为 body html 和 root 记住只有 root 才有冒号
:root{
--bgcolor:#000;
}

使用：在要用的地方用 var(--设置的名称，这个是可选参数当前面无效时的参数)

<h1 style="color:var(--bgcolor)" ></h1>

普通声明：声明了一个变量 bgcolor 
--bgcolor:#ff0;

2)@apply 用法：引用集合样式 暂时不支持

:root{
 --bg-color:{
 background-color:#f00;
 };
}
.title{
width:200px;
@apply --bg-color;
}

3)自定义选择器：@custom-selector :–选择器名称 选择的元素(h1,h2,h3,h4,h5) 注意冒号(暂不支持)

用法：
 定义：@custom-selector :--init h1,h2,h3,h4,h5,p;

使用：
 :--init{
 margin:0;
 padding: 0;
 }

4)css3 用法

a:否定伪类：not 在 css4 中可以用逗号将否定元素分割例如(.intro,.div1)

p:not(.intro) { font-weight: normal; }
 表示所有 p 元素中 class 为 intro 的元素除外

b：匹配任何伪类
 span:matches( .error, .warn) { color: red; }

表示 span 中带 errot warn 的元素

@font-face
 {
 font-family:myFirstFont；
 src：url(sansation_light.woff);
 }
 div
 {
 font-family:myFirstFont;
 }