使用currentColor變量時，發現了--accent-color變量，一直以來以爲CSS中的變量只有這兩個，因此寫下這篇學習筆記，好在評論區的道友指點迷津，感謝，以下是重新寫的新筆記。
找了很久關於–accent-color的資料，但是沒有找到，以下完全是個人理解，如果有錯誤，請大家在評論區指正，非常感謝。
currentColor
currentColor是CSS中的關鍵字，代表原始color屬性的計算值，繼承元素本身或者父元素的color屬性值。類似inherit，注意只是繼承color屬性值。
CSS自定義屬性
1、 聲明
帶有前綴--的屬性名，比如--example--name，表示的是帶有值的自定義屬性，其可以通過 var 函數在全文檔範圍內複用的。自定義屬性遵循CSS級聯規則。
例如：
--keyword:left;
--accent-color:#ff3300;
--complex-color: 3px 6px rgba(34,34,34,0.5);爲什麼選擇--作爲前綴定義呢？這是因爲$value被saas使用，@value被less使用。
注：
- 自定義屬性的值可以是顏色、字符串、多個值的組合等
- 自定義屬性名對大小寫敏感
2、 用法
通過var函數在全文當範圍內使用自定義變量。
例如：
:root{
--theme-color:#f45fef;
}
a{
color: var(--theme-color);
}注意：
1、 var函數可以有第二個參數，表示變量的默認值，如果變量不存在，就會使用默認值，可以作爲回退方案。
a{
color: var(--theme-color,#ff3355);
}2、var也可以用來定義自定義屬性的屬性值，如：
:root{
--base-color:#f45fef;
--btn-color:var(--base-color);
}注意：變量值只能用作屬性值，不能用作屬性名
3、 自定義屬性值類型
上面說到，自定義屬性的值可以是顏色、字符串、多個值的組合等。其實總體可以分爲兩類：字符串和數值。
1、自定義屬性值爲字符串，可以與其他的屬性值進行拼接，示例如下：
:root{
--string-first:"hello ";
--string-second:var(--string-first)'world';
}
p:after{
position:absolute;
content:var(--string-second);
}
/*結果輸出hello world*/2、自定義屬性值爲數值，則不能與其數值單位直接連用，結果是無效的，必須使用calc()函數進行連接，示例如下：
:root{
--base-length:200;
}
.var3{
width: calc(var(--base-length)*1px);/*正常顯示*/
width: var(--base-length)px; /*無效*/
}如果自定義屬性值帶有單位，則不能寫成字符串，如下：
:root{
--base-length:"200px";/*無效*/
--base-length:200px;/*正常顯示*/
}
.var3{
width: var(--base-length);
}4、 作用域
同一個 CSS 自定義屬性，可以在多個選擇器內聲明。讀取的時候，優先級最高的聲明生效。也就是說自定義屬性的作用域就是它所在的選擇器的有效範圍。
注：:root 這個 CSS 僞類匹配文檔樹的根元素。對於 HTML 來說，:root 表示 <html> 元素，除了優先級更高之外，與 html 選擇器相同。
- 全局的自定義屬性通常放在根元素
:root裏面； - 如果想讓某個自定義屬性只在部分元素下可見，只需要在特定的元素下定義該自定義屬性即可。
- 媒體查詢也可以提供作用域
@media screen and (min-width: 1025px) {
:root {
--screen-category: 'desktop';
}
}5、 瀏覽器兼容性
經過測試，瀏覽器兼容性如下：
- chrome(63.0.3239.132)支持
- Firefox（59.0.2）支持
- opera（52.0.2871.64 ）支持
- safari(5.1.7) 不支持
- IE 不支持
我們可以用以下寫法作爲回退：
a {
color: #7F583F;
color: var(--base-color);
}6、 示例
ul{--accent-color:red;}
ol{--accent-color:blue; }
li{background: var(--accent-color);}<div class="test-list">
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
</ul>
</div>
<div class="test-list">
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
</div>顯示效果：
本文參考自：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/–*
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care