css ^=选择器

今天看了一下css的一个匹配规则^=,可以理解为sql里面like的左匹配，
如：
span[color^="#ff"]{ 
        background:#0000ff;
    }
即为选择span color属性以ff开头的元素添加背景色。

ps:

这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如：

[class^="test"] { background:#ffff00; }

表示设置 class 属性值以 "test" 开头的所有元素的背景色，也就是说对class="test", class="test1" class="test-001"的元素都是有效的。

除此之外，还有一些常用的css属性选择器如下：

[attribute~=value] 选取属性值中包含指定词汇的元素

[attribute|=value]  选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素

比如：

<div>
        <span color="#FFFFFFF">颜色</span>
        <font color="#FF0001">颜色</font>
        <p color="#FF1111">颜色</p>
        <font color="#FF2514">颜色</font>
        <font color="#FF6582">颜色</font>
        <font color="#FF2587">颜色</font>
    </div>
    <style>
        /**左匹配**/
    span[color^="#ff"]{ 
        background:#0000ff;
    }

    p[color^="#ff"]{ 
        background:red;
    }
    </style>