2.属性名可以包含数字，字母，以及下划线或者短横线，也可以是中文，日文或者韩文，但不能是属性名或数字开头，不能包含$，[，^，(，%等字符。
3.变量--primary只能用属性值，不能用作属性名
4.数字和单位直接写一起需使用calc()函数
拓展
cal()函数支持 "+", "-", "*", "/" 运算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
5.变量的值是字符串时，可以直接拼接
6.var()函数第二个参数是设置默认值，若该变量不存在，则使用此默认值
7.css变量可以在任意选择器中使用包括在标签元素style及@media中
若想了解更深可看大神文章：
https://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/
这不是HTML的功能也不是CSS的功能，而是浏览器的功能。现代浏览器的最大的特点就是开放性，就是说对浏览器来说，不管代码对不对都要能接受并猜测编写者原本所想表达的意思。对于你这种写法，浏览器正确的理解到了你的意思，那显示的效果就跟你预想的一样，如果理解错了，那效果肯定就不一样了。这种写法，浏览器不能保证每次都正确理解你的意思，而且低版本的浏览器，比如IE6就理解不了这种写法。CSS选择器有三种类型：标记选择器、类别选择器、ID选择器
一、标记选择器：
就是“O 标签（重新定义。。。。）”
标记选择器是必须使用HTML的标签作为选择器的名称，也就是说“(2)当选中第二个时候，名称框中必须是下拉列表框中的内容” ，是的。
格式：标记名称{属性：值；属性：值；}
例子：
<head>
<style type="text/css">
p{color:red
font-size:25px
}
</style>
</head>
<body>
<p>标记选择器</p>
</body>
二、类别选择器：
就是“O 类（可应用于任何标签）”
也叫class选择器，可以自定义选择器的名称，其中class为自定义的名称。
格式： .class{属性：值；属性：值；}
例子：
<head>
<style type="text/css">
.one{color:red
font-size:25px
}
.two{color:blue
font-size:20px
}
.three{color:green
font-size:15px
}
</style>
<body>
<p class="one">class选择器1</p>
<p class="two">class选择器2</p>
<p class="three">class选择器3</p>
<p class="three">class选择器4</p>
</body>
三、ID选择器：
就是”O 高级 （ID、伪类。。。。）“
用法基本和class选择器相同，也可以自定义选择器名称，其中ID为自定义的名称。不同的是：ID选择器不允许一个ID同时出现在两个标签中，而class选择器则相反。
格式：#ID{属性：值；属性：值；}
例子：
<head>
<style type="text/css">
#one{color:red
font-size:25px
}
#two{color:blue
font-size:20px
}
#three{color:green
font-size:15px
}
</style>
<body>
<p id="one">class选择器1</p>
<p id="two">class选择器2</p>
<p id="three">class选择器3</p>
<p id="three">class选择器4</p>
</body>
也就是说上面两个<p>标签中，同时出现了两个ID名称，为”three“，这在ID选择器中是不允许出现的。
以上是我的回答，至于什么时候用哪种选择器，这是可以灵活运用，没有特定的该用哪个选择器。
