[class^='icon-'], [class*=' icon-']

问题前言

练习vue项目开发的时候，观看她人写的项目中css语法，发现了如下写法：

 [class^="icon-"],
 [class*=" icon-"] {
   .font-s2;
   float: left;
   margin-left: -1.5rem;
   margin-right: .5rem;
   margin-top: .1rem;
   width: 1em;
 }

---

语法解析

第一时间的想法是直接去stackoverflow上搜索看看，后面搜索到了这篇文章 Odd CSS syntax. [class^=‘icon-’], [class*=’ icon-’]。

看了下文中他人的解释：瞬间就明白了哈。但是呢 这只是别人的解释嘛，我们还是要在官网上看到明确的写法。

[class^='icon-'] - classes starting with 'icon-' (eg. class='icon-blah blah')
[class$='-icon'] - classes ending with '-icon'   (eg. class='blah blah-icon')
[class*='icon']  - classes containing 'icon'     (eg. class='blah xxx-icon-blah')

---

官网写法

后面在官网css selector中发现了如下写法：只截取了部分内容

---

问题总结

stackoverflow是个不错的问题解决地方。另外一些问题归根结底都是基础知识不够深厚，阅读官网资料不够细心、不够耐心。