Question

CSS中属性前面加了两个-是什么意思？

例如我看到的：
#fill {
--color: #a972cb;
--hover: #cb72aa;
}
和前面不加横线的有什么区别？

Answer 1

你可以这么理解,--color其实就是个属性名，但是这个东西是用户自定义的属性名，而非CSS样式的合法属性名
在实际开发当中，并不会出现这个写法，CSS属性当中只有color属性，也没有hover属性
hover是一种状态
这个地方很有可能是开发工程师为了备注此处文本默认为什么颜色，hover为什么颜色而故意书写的，但是即便是这样，在实际开发当中也不推荐，原因是“可以使用CSS注释，将不需要的内容注释起来”

追问

您看这样理解可以吗，
——hover其实并没有什么用，相当于注释而已。
对吗？

追答

首先，它没有用，这个你理解的是没问题的
其次，它并不是注释，CSS注释以/*开头，以*/作为结尾，这个才是最为标准的
在实际标准的WEB前端开发工作当中，--hover这种写法并不会出现

追问

不好意思，我找到了资料。你的回答是错误的。

这是CSS中的变量

网页链接

追答

好的，这个是css3新增属性，但是没有得到ie和ff的支持。所以一直以css2.0的角度回答的，不好意思

Answer 2

没这个写法，你看到的东西本身就是错的。

追问

但是我去掉--color没有影响
一旦我去掉--hover效果就改变了。

追答

原来加--的就没生效，你去掉了hover效果就出来了。

追问

不好意思，我找到了资料。你的回答是错误的。

这是CSS中的变量

网页链接

追答

不好意思，css从你问这个问题到现在都不支持变量，其他第三方的Less/Sass之类的玩意可以赋予css有变量的能力，但是跟css关系不大了。

Answer 3

css自定义属性：
概念：增加css文件可读性、可维护性
作用域：自定义属性只能应用于当前元素或当前元素的后代元素
定义： html { --b: red; }
使用： html {background-color: var(--b);}