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>