CSS3——[class^=value]选择器

<ul class="local-nav">
         <li><span class="local-nav-icon-icon1"></span></li>
         <li>span class="local-nav-icon-icon2"></span></li>
         <li><span class="local-nav-icon-icon3"></span></li>
         <li>span class="local-nav-icon-icon4"></span></a></li>
         <li><span class="local-nav-icon-icon5"></span></li>
     </ul>

在CSS中想要选择类名以 local-nav-icon 开头的所有span元素，一般有下两种方式可以选择：

• 可以直接在span后面跟[class^=local-nav-icon],span和[class^=local-nav-icon]之间不能有空格。

.local-nav li span[class^=local-nav-icon]{···CSS代码}

• 可以直接在li后面跟空格后再跟 [class^=local-nav-icon], li和[class^=local-nav-icon]之间必须有空格。

.local-nav li [class^=local-nav-icon]{...CSS代码}

 

也可以在.local-nav 后面跟空格后再跟[class^=local-nav-icon]，但是最好写到li。

.local-nav [class^=local-nav-icon]{...CSS代码}